CodePen Embed - Simple color schemes with custom properties

<div class="palette-constructor">
  <!-- Color Inputs -->
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="red"
  >
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="orange"
  >
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="yellow"
  >
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="green"
     checked
  >
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="blue"
  >
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="dark-blue"
  >
  <input 
     class="color-input visually-hidden"
     type="radio" 
     name="color"
     id="violet"
  >
  <!-- /Color Inputs -->
  
  <!-- Type inputs -->
  <input 
     class="type-input visually-hidden"
     type="radio" 
     name="type"
     id="contrast"
  >
  <input 
     class="type-input visually-hidden"
     type="radio" 
     name="type"
     id="analog"
  >
  <input 
     class="type-input visually-hidden"
     type="radio" 
     name="type"
     id="triada"
     checked
  >
  <input 
     class="type-input visually-hidden"
     type="radio" 
     name="type"
     id="triada-splitted"
  >
  <input 
     class="type-input visually-hidden"
     type="radio" 
     name="type"
     id="square"
  >
  <input 
     class="type-input visually-hidden"
     type="radio" 
     name="type"
     id="rect"
  >
  <!-- /Type inputs -->
  
  <div class="palette-constructor__container">
    <div class="color-labels">
      <label 
         for="red"
         class="color-label color-label--red">
        <span class="visually-hidden">Red</span>
      </label>
      <label 
         for="orange"
         class="color-label color-label--orange">
        <span class="visually-hidden">Orange</span>
      </label>
      <label 
         for="yellow"
         class="color-label color-label--yellow">
        <span class="visually-hidden">Yellow</span>
      </label>
      <label 
         for="green"
         class="color-label color-label--green">
        <span class="visually-hidden">Green</span>
      </label>
      <label 
         for="blue"
         class="color-label color-label--blue">
        <span class="visually-hidden">Blue</span>
      </label>
      <label 
         for="dark-blue"
         class="color-label color-label--dark-blue">
        <span class="visually-hidden">Dark blue</span>
      </label>
      <label 
         for="violet"
         class="color-label color-label--violet">
        <span class="visually-hidden">Violet</span>
      </label>
    </div>


    <div class="type-labels">
      <label 
         for="contrast"
         class="type-label type-label--contrast">
        Contrast
      </label>

      <label 
         for="analog"
         class="type-label type-label--analog">
        Analog
      </label>

      <label 
         for="triada"
         class="type-label type-label--triada">
        Triada
      </label>

      <label 
         for="triada-splitted"
         class="type-label type-label--triada-splitted">
        Triada splitted
      </label>

      <label 
         for="square"
         class="type-label type-label--square">
        Square
      </label>

      <label 
         for="rect"
         class="type-label type-label--rect">
        Rect
      </label>
    </div>

    <div class="palette">
      <ul class="palette__list">
        <li class="palette__item palette__item--1"></li>
        <li class="palette__item palette__item--2"></li>
        <li class="palette__item palette__item--3"></li>
        <li class="palette__item palette__item--4"></li>
      </ul>
    </div>

    <ul class="color-circle">
      <li class="color-circle__item color-circle__item--1"></li>
      <li class="color-circle__item color-circle__item--2"></li>
      <li class="color-circle__item color-circle__item--3"></li>
      <li class="color-circle__item color-circle__item--4"></li>
    </ul>
  </div>
</div>

:root {
  --gray-light: #DDD;
  --black: #000;
  
  --button-height: 2rem;
  
  --shadow-border: 0 0 0 2px var(--black);
  --shadow-border-light: 0 0 0 2px var(--gray-light);
  --shadow-focus: var(--shadow-border), 0 0 5px var(--black);
  --shadow-hover: 0 3px 2px var(--gray-light);
  --radius: 4px;
  --transform-hover: translateY(-3px);
  --transition: .075s;
  --transition-property: transform, box-shadow;
  
  --colors: 7;
  --step: calc(360deg / var(--colors));
  --base-hue: 0deg;
  --base-sat: 100%;
  --base-lght: 50%;
  --cells: 2;
  
  /* Cells for choosing color */
  --label-1-hue: calc(var(--base-hue) + 15deg);
  --label-2-hue: calc(var(--base-hue) + 40deg);
  --label-3-hue: calc(var(--base-hue) + 50deg);
  --label-4-hue: calc(var(--base-hue) + 75deg);
  --label-5-hue: calc(var(--base-hue) + 190deg);
  --label-6-hue: calc(var(--base-hue) + 220deg);
  --label-7-hue: calc(var(--base-hue) + 285deg);

  /* Palette defaults */
  --palette-hue: var(--base-hue);
  --palette-step-1: var(--step);
  --palette-step-2: calc(var(--step) * 2);
  --palette-step-3: calc(var(--step) * 3);
  --palette-step-4: calc(var(--step) * 4);
  
  --palette-step-3-display: none;
  --palette-step-4-display: none;
}

// Changing colors   
#red:checked ~ * {
  --palette-hue: var(--label-1-hue);
}
#orange:checked ~ * {
  --palette-hue: var(--label-2-hue);
}
#yellow:checked ~ * {
  --palette-hue: var(--label-3-hue);
}
#green:checked ~ * {
  --palette-hue: var(--label-4-hue);
}
#blue:checked ~ * {
  --palette-hue: var(--label-5-hue);
}
#dark-blue:checked ~ * {
  --palette-hue: var(--label-6-hue);
}
#violet:checked ~ * {
  --palette-hue: var(--label-7-hue);
}

// Changing types
#contrast:checked ~ * {
  --palette-step-1: 180deg;
}
#analog:checked ~ * {
  --cells: 3;
  --palette-step-1: 30deg;
  --palette-step-2: 60deg;
  --palette-step-3-display: flex;
}
#triada:checked ~ * {
  --cells: 3;
  --palette-step-1: 120deg;
  --palette-step-2: 240deg;
  --palette-step-3-display: flex;
}
#triada-splitted:checked ~ * {
  --cells: 3;
  --palette-step-1: 160deg;
  --palette-step-2: 200deg;
  --palette-step-3-display: flex;
}
#square:checked ~ * {
  --cells: 4;
  --palette-step-1: 90deg;
  --palette-step-2: 180deg;
  --palette-step-3: 270deg;
  --palette-step-3-display: flex;
  --palette-step-4-display: flex;
}
#rect:checked ~ * {
  --cells: 4;
  --palette-step-1: 60deg;
  --palette-step-2: 180deg;
  --palette-step-3: 240deg;
  --palette-step-3-display: flex;
  --palette-step-4-display: flex;
}

BODY {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #333;
  background-image: radial-gradient(transparent, black);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  border: 0;
  padding: 0;
  clip-path: inset(100%);
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.palette-constructor {
  max-width: 750px;
  flex-shrink: 0;
  
  @media (max-width: 750px) {
    max-width: 100%;
  }
}

.palette-constructor__container {
  --palette-hue-1: var(--palette-hue);
  --palette-hue-2: calc(var(--palette-hue) + var(--palette-step-1));
  --palette-hue-3: calc(var(--palette-hue) + var(--palette-step-2));
  --palette-hue-4: calc(var(--palette-hue) + var(--palette-step-3));
  --palette-hue-5: calc(var(--palette-hue) + var(--palette-step-4));
   
  padding: 1rem;
  border-radius: calc(var(--radius) + .5rem);
  border: 2px solid var(--gray-light);
  background: #FFF;
  
  display: grid;
  grid-template-columns: 4fr 1fr;
  grid-template-rows: min-content min-content 2fr;
  gap: 1.5rem;
  
  @media (max-width: 750px) {
    grid-template-columns: 2fr 1fr;
  }

  @media (max-width: 500px) {
    display: flex;
    flex-direction: column;
  }
}

.color-labels {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));
  grid-auto-flow: rows;
  
  grid-auto-rows: 1fr;
  gap: .5rem;
}

.color-label {
  display: block;
  min-width: 20%;
  min-height: var(--button-height);
  border-radius: var(--radius);
  background: hsl(var(--label-hue), var(--base-sat), var(--base-lght));
  cursor: pointer;
  transition: var(--transition);
  transition-property: var(--transition-property);
  
  &:hover {
    transform: var(--transform-hover);
    box-shadow: var(--shadow-hover);
  }
  
  #red:checked ~ * .color-labels &--red,
  #orange:checked ~ * .color-labels &--orange,
  #yellow:checked ~ * .color-labels &--yellow,
  #green:checked ~ * .color-labels &--green,
  #blue:checked ~ * .color-labels &--blue,
  #dark-blue:checked ~ * .color-labels &--dark-blue,
  #violet:checked ~ * .color-labels &--violet {
    box-shadow: var(--shadow-focus);
    transform: none;
  }

  &--red {
    --label-hue: var(--label-1-hue);    
  }
  &--orange {
    --label-hue: var(--label-2-hue);
  }
  &--yellow {
   --label-hue: var(--label-3-hue);
  }
  &--green {
    --label-hue: var(--label-4-hue);
  }
  &--blue {
    --label-hue: var(--label-5-hue);
  }
  &--dark-blue {
    --label-hue: var(--label-6-hue);
  }
  &--violet {
    --label-hue: var(--label-7-hue);
  }
}

.type-labels {
  grid-column: 1;
  
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.type-label {
  flex-grow: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--button-height);
  padding: 0 .25rem;
  box-sizing: border-box;
  box-shadow: var(--shadow-border-light);
  border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
  transition-property: var(--transition-property);
  
  &:hover {
    transform: var(--transform-hover);
    box-shadow: var(--shadow-border-light), var(--shadow-hover);
  }
  
  @media (max-width: 750px) {
    min-width: calc((100% - .5rem * 5) / 3);
  }
  
  #contrast:checked ~ * .type-labels &--contrast,
  #analog:checked ~ * .type-labels &--analog,
  #triada:checked ~ * .type-labels &--triada,
  #triada-splitted:checked ~ * .type-labels &--triada-splitted,
  #rect:checked ~ * .type-labels &--rect,
  #square:checked ~ * .type-labels &--square {
    box-shadow: var(--shadow-focus);
    transform: none;
  }
}

.palette {
  grid-column: 1;
  height: 100%;
  
  &__list {
    display: grid;
    grid-template-columns: repeat(var(--cells), 1fr);
    grid-template-rows: 1fr;
    height: 100%;
    min-height: 5rem;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-border-light);
    margin: 0;
    padding: 0;
    list-style: none;  
  }
  
  &__item {
    background: hsl(var(--palette-hue), var(--base-sat), var(--base-lght));
  }
  
  &__item--1 {
    --palette-hue: var(--palette-hue-1);
  }
  &__item--2 {
    --palette-hue: var(--palette-hue-2);
  }
  &__item--3 {
    --palette-hue: var(--palette-hue-3);
  }
  &__item--4 {
    --palette-hue: var(--palette-hue-4);
  }
  &__item--5 {
    --palette-hue: var(--palette-hue-5);
  }
}

.color-circle {
  grid-column: 2;
  grid-row-start: 1;
  grid-row-end: 4;
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0;
  padding: 0;
  align-self: center;
  list-style: none;
  background: url('https://yoksel.github.io/Sandbox/img/conic-gradient.png');
  border-radius: 50%;
  box-shadow: var(--shadow-border-light);
  background-size: contain;
  
  @supports (background-image: conic-gradient(red, gold)) {
    background: conic-gradient(
    hsl(var(--label-1-hue), var(--base-sat), var(--base-lght)) var(--label-1-hue),
    hsl(var(--label-2-hue), var(--base-sat), var(--base-lght)) var(--label-2-hue),
    hsl(var(--label-3-hue), var(--base-sat), var(--base-lght)) var(--label-3-hue),
    hsl(var(--label-4-hue), var(--base-sat), var(--base-lght)) var(--label-4-hue),
    hsl(var(--label-5-hue), var(--base-sat), var(--base-lght)) var(--label-5-hue),
    hsl(var(--label-6-hue), var(--base-sat), var(--base-lght)) var(--label-6-hue),
    hsl(var(--label-7-hue), var(--base-sat), var(--base-lght)) var(--label-7-hue),
    hsl(var(--label-1-hue), var(--base-sat), var(--base-lght))
  );
  }
  
  &__item {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 2rem;
    height: 50%;
    left: 0%;
    right: 0%;
    margin: auto;
    transform-origin: center bottom;
    transition: transform .35s;
    
    &::before {
      content: '';
      display: block;
      margin-top: .5rem;
      width: 1.25rem;
      height: 1.25rem;
      border-radius: 50%;
      box-shadow: var(--shadow-border);
    }
    
    &::after {
      content: '';
      display: block;
      margin: auto;
      width: 2px;
      flex-grow: 1;
      background: var(--black);
    }
  }
  
  &__item--1 {
    transform: rotate(var(--palette-hue-1));
    
    &::before {
      background: radial-gradient(black 35%, transparent 0);
    }
  }
  &__item--2 {
    transform: rotate(var(--palette-hue-2));
  }
  &__item--3 {
    display: var(--palette-step-3-display);
    transform: rotate(var(--palette-hue-3));
  }
  &__item--4 {
    display: var(--palette-step-4-display);
    transform: rotate(var(--palette-hue-4));
  }
}

View Compiled

// https://color.adobe.com/ru/create/color-wheel
// https://ru.qwe.wiki/wiki/Color_scheme
// https://medium.com/design-spot/%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2%D0%BE%D0%B9-%D0%BA%D1%80%D1%83%D0%B3-%D0%B3%D0%B0%D1%80%D0%BC%D0%BE%D0%BD%D0%B8%D0%B8-%D0%B8-%D0%BA%D0%BE%D0%BB%D0%BE%D1%80%D0%B8%D1%82%D1%8B-425af5a240d2

View Compiled

This Pen is owned by yoksel on CodePen.

See more by @yoksel on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.