css+js实现色彩理论展示代码-html代码-BFW代码库

css+js实现色彩理论展示代码

代码语言：html

所属分类：其他

代码描述：css+js实现色彩理论展示代码，可设置色彩参数来展示不同的色彩形成。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
:where(.ui-color-palette) {
  --h: 200deg;
  --s: 100%;
  --l: 50%;

  display: grid;
  font-family: ui-sans-serif, system-ui, sans-serif;
  row-gap: 1ch;

  & fieldset {
    border: 1px solid ButtonFace;
    border-radius: .5ch;
    display: flex;
    flex-wrap: wrap;
    font-size: smaller;
    gap: 1ch;
    inline-size: max-content;
  }

  & label {
    background: color-mix(in srgb, Canvas, CanvasText 5%);
    border-radius: .5ch;
    grid-template-columns: 1fr;
    padding: 0 .66ch;
    text-align: center;
    user-select: none;
    &:has([type=radio]:checked) {
      background: hsl(190, 75%, 40%);
      color: #FFF;
    }
  }

  & [type=color] {
    all: unset;
    appearance: none;
    aspect-ratio: 1;
    background: 
    var(--_g, conic-gradient(
      hsl(var(--h) var(--s) var(--l1, 90%)) 0 30deg,
      hsl(calc(var(--h) + 30deg) var(--s) var(--l2, 90%)) 0 60deg,
      hsl(calc(var(--h) + 60deg) var(--s) var(--l3, 90%)) 0 90deg,
      hsl(calc(var(--h) + 90deg) var(--s) var(--l4, 90%)) 0 120deg,
      hsl(calc(var(--h) + 120deg) var(--s) var(--l5, 90%)) 0 150deg,
      hsl(calc(var(--h) + 150deg) var(--s) var(--l6, 90%)) 0 180deg,
      hsl(calc(var(--h) + 180deg) var(--s) var(--l7, 90%)) 0 210deg,
      hsl(calc(var(--h) + 210deg) var(--s) var(--l8, 90%)) 0 240deg,
      hsl(calc(var(--h) + 240deg) var(--s) var(--l9, 90%)) 0 270deg,
      hsl(calc(var(--h) + 270deg) var(--s) var(--l10, 90%)) 0 300deg,
      hsl(calc(var(--h) + 300deg) var(--s) var(--l11, 90%)) 0 330deg,
      hsl(calc(var(--h) + 330deg) var(--s) var(--l12, 90%)) 0 360deg
    ));
    border-radius: 50%;
    container-type: inline-size;
    display: grid;
    place-content: center;
    place-items: center;
    rotate: -15deg;
    width: 100%;
  }

  /* All */
  &:has([value=all]:checked) {
    --l1: var(--l);
    --l2: var(--l);
    --l3: var(--l);
    --l4: var(--l);
    --l5: var(--l);
    --l6: var(--l);
    --l7: var(--l);
    --l8: var(--l);
    --l9: var(--l);
    --l10: var(--l);
    --l11: var(--l);
    --l12: var(--l);
  }

  /* Primary */
  &:has([value=primary]:checked) {
    --l1: var(--l);
  }

  /* Complimentary */
  &:has([value=complimentary]:checked) {
    --l1: var(--l);
    --l7: var(--l);
  }

  /* Analogous */
  &.........完整代码请登录后点击上方下载按钮下载查看