Color Palette

These pages will explain how the color palette works and defined in Neocàtema.

Monochromatic

#color-184 {
    --h: 306;
    --s: 71%;
    --l: 47%;
    --b: hsl(306,71%,3%);
    --c: hsl(306,71%,47%);
    --w: hsl(306,71%,97%);
    --df: 8%;
    --uf: 10%;
    --t: var(--w);
}

To use this palette, please include .hsl-pal in element class, and set --color: value. (hex-color-code, RGB, or others)

• #color-184 is constructed stylesheet from #c2b (N).
• df and if is stepping-values ranged from (5% to 95%). So Every color had different stepping-values
  • df = (N ligthness - 5%) / 5
  • uf = (95% - N ligthness) / 5
• w(white) is the whiteness level(97%), of course, the white is when lightness level = 100%, and the black is 0%
• b(black) is the blackness level(3%)
• t(text) value were determined by the level of N lightness, You could use .auto-text-color to make it automatically use var(--b) or var(--w) by recalculated the current lightness level

Theoretical

• Analogous color schemes are created by using colors that are next to each other on the color wheel. (hue + 30, hue - 30)
• Complementary schemes are created by combining colors from opposite sides of the color wheel. (hue + 180)
• Compound schemes (aka Split Complementary) are almost the same as complementary schemes. Instead of using colors that are opposites, it uses colors on both sides of the opposite hue. (hue + 210, hue + 150)
• Triadic schemes are made up of hues equally spaced around the color wheel.( hue + 120, hue - 120 )

hsl-pal classes

.hsl-pal {
    --c-d4: hsl(var(--h), var(--s), calc(var(--l) + (-5 * var(--df))));
    --c-d3: hsl(var(--h), var(--s), calc(var(--l) + (-4 * var(--df))));
    --c-d2: hsl(var(--h), var(--s), calc(var(--l) + (-3 * var(--df))));
    --c-d1: hsl(var(--h), var(--s), calc(var(--l) + (-2 * var(--df))));
    --c-d: hsl(var(--h), var(--s), calc(var(--l) + (-1 * var(--df))));
    --c-l: hsl(var(--h), var(--s), calc(var(--l) + (1 * var(--uf))));
    --c-l1: hsl(var(--h), var(--s), calc(var(--l) + (2 * var(--uf))));
    --c-l2: hsl(var(--h), var(--s), calc(var(--l) + (3 * var(--uf))));
    --c-l3: hsl(var(--h), var(--s), calc(var(--l) + (4 * var(--uf))));
    --c-l4: hsl(var(--h), var(--s), calc(var(--l) + (5 * var(--uf))));
    --c-a1: hsl(calc(var(--h) + 30), var(--s), var(--l));
    --c-a2: hsl(calc(var(--h) - 30), var(--s), var(--l));
    --c-c0: hsl(calc(var(--h) + 180), var(--s), var(--l));
    --c-c1: hsl(calc(var(--h) + 210), var(--s), var(--l));
    --c-c2: hsl(calc(var(--h) + 150), var(--s), var(--l));
    --c-t1: hsl(calc(var(--h) + 120), var(--s), var(--l));
    --c-t2: hsl(calc(var(--h) - 120), var(--s), var(--l));
    --c-ac: hsla(calc(var(--h) + 180), var(--s), var(--l), .2);
    --c-ho: hsla(calc(var(--h) + 180), var(--s), var(--l), .4);
}