color-palette-generator

A desktop-only color palette generator. The palette is capable of generate tetradic colors and its complementaries, based on selected color.

This app was made for #100DaysOfCode.

This project also belongs to #100DaysOfVue initiative.

Additional used components

• Parcel for watch and bundling files.
• ColorScheme to rely on colorschemes calculations.

Learned during the process

1. Color theory... God, what a nice page to learn about colors math.
2. Vue binding object syntax for style attribute.
3. More about CSS Positioning (*).
4. SCSS capabilities (*).

(*) My first approach was to make a color wheel with 360 saturated colors (1 per degree) like this:

$width: 4; // Without units, so I could fit into another calculations

.color {
  display: inline-block;
  width: #{$width}px;
  height: 200px;
  transform-origin: bottom; // This got me goosebumps, really :)
  @for $i from 1 through 360 {
    &:nth-child(#{$i}) {
      transform: translate(-#{$i*$width}px) rotate(#{$i}deg); // THIS made the trick
      background: hsl($i, 100%, 50%);
    }
  }
}

But, I was unable to properly position the wheel since all div.color elements were transformed. So, I ran out of solutions in my head. Anyways, I leave the other component (see src/components/_Wheel.vue) if anyone can see if something can be improved.