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

代码语言：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 */
  &:has([value=an1]:checked) { --l1: var(--l); --l2: var(--l); --l3: var(--l); }
  &:has([value=an2]:checked) { --l2: var(--l); --l3: var(--l); --l4: var(--l); }
  &:has([value=an3]:checked) { --l3: var(--l); --l4: var(--l); --l5: var(--l);  }
  &:has([value=an4]:checked) { --l4: var(--l); --l5: var(--l); --l6: var(--l); }
  &:has([value=an5]:checked) { --l5: var(--l); --l6: var(--l); --l7: var(--l); }
  &:has([value=an6]:checked) { --l6: var(--l); --l7: var(--l); --l8: var(--l); }
  &:has([value=an7]:checked) { --l7: var(--l); --l8: var(--l); --l9: var(--l); }
  &:has([value=an8]:checked) { --l8: var(--l); --l9: var(--l); --l10: var(--l); }
  &:has([value=an9]:checked) { --l9: var(--l); --l10: var(--l); --l11: var(--l); }
  &:has([value=an10]:checked) { --l10: var(--l); --l11: var(--l); --l12: var(--l); }
  &:has([value=an11]:checked) { --l11: var(--l); --l12: var(--l); --l1: var(--l); }
  &:has([value=an12]:checked) { --l12: var(--l); --l1: var(--l); --l2: var(--l); }

  /* Shades */
  &:has([value=shades]:checked) {
    --_g: conic-gradient(
      hsl(var(--h) var(--s) var(--l)) 0deg 30deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 8.18%) 30deg 60deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 16.36%) 60deg 90deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 24.54%) 90deg 120deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 32.72%) 120deg 150deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 40.90%) 150deg 180deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 49.09%) 180deg 210deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 57.27%) 210deg 240deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 65.45%) 240deg 270deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 73.63%) 270deg 300deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 81.81%) 300deg 330deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #000 90%) 330deg 360deg
    );
  }

  /* Split Complimentary */
  &:has([value=split]:checked) {
    --l1: var(--l);
    --l6: var(--l);
    --l8: var(--l);
  }

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

  /* Tetratic */
  &:has([value=tet1]:checked) { --l1: var(--l); --l3: var(--l); --l7: var(--l); --l9: var(--l); }
  &:has([value=tet2]:checked) { --l2: var(--l); --l4: var(--l); --l8: var(--l); --l10: var(--l); }
  &:has([value=tet3]:checked) { --l3: var(--l); --l5: var(--l); --l9: var(--l); --l11: var(--l); }
  &:has([value=tet4]:checked) { --l4: var(--l); --l6: var(--l); --l10: var(--l); --l12: var(--l); }
  &:has([value=tet5]:checked) { --l5: var(--l); --l7: var(--l); --l11: var(--l); --l1: var(--l); }
  &:has([value=tet6]:checked) { --l6: var(--l); --l8: var(--l); --l12: var(--l); --l2: var(--l); }
  
  /* Tints */
  &:has([value=tints]:checked) {
    --_g: conic-gradient(
      hsl(var(--h) var(--s) var(--l)) 0deg 30deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 8.18%) 30deg 60deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 16.36%) 60deg 90deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 24.54%) 90deg 120deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 32.72%) 120deg 150deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 40.90%) 150deg 180deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 49.09%) 180deg 210deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 57.27%) 210deg 240deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 65.45%) 240deg 270deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 73.63%) 270deg 300deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 81.81%) 300deg 330deg,
      color-mix(in srgb, hsl(var(--h) var(--s) var(--l)), #fff 90%) 330deg 360deg
    );
  }

  /* Overlay */
  &:has([value=ovshades]:checked) { --_o: 0%; }
  &:has([value=ovtints]:checked) { --_o: 100%; }
  &:has([value=ovshades]:checked),
  &:has([value=ovtints]:checked) {
    & [type=color]::after {
      border-radius: 50%;
      content: "";
      display: block;
      aspect-ratio: 1;
      background: radial-gradient(
        circle at center,
        hsla(0, 0%, var(--_o), .9) 0 5cqi,
        hsla(0, 0%, var(--_o), .8) 5cqi 10cqi,
        hsla(0, 0%, var(--_o), .7) 10cqi 15cqi,
        hsla(0, 0%, var(--_o), .6) 15cqi 20cqi,
        hsla(0, 0%, var(--_o), .5) 20cqi 25cqi,
        hsla(0, 0%, var(--_o), .4) 25cqi 30cqi,
        hs.........完整代码请登录后点击上方下载按钮下载查看