rivendellweb pattern library

OKLCH Colors: Lighter 

<h3>Lighter Color</h3>

<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to lighten a black-like colors in increments of 10%.</p>

<div class="color-container">
    <div class="lab-color-item charcoal">charcoal<br /><strong>lab(12.57% 2.27 312.31)</strong></div>
    <div class="lab-color-item light-text9">charcoal<br /><strong>10% lighter</strong></div>
    <div class="lab-color-item light-text8">charcoal<br /><strong>20% lighter</strong></div>
    <div class="lab-color-item light-text7">charcoal<br /><strong>30% lighter</strong></div>
    <div class="lab-color-item light-text6">charcoal<br /><strong>40% lighter</strong></div>
    <div class="lab-color-item light-text5">charcoal<br /><strong>50% lighter</strong></div>
    <div class="lab-color-item light-text4">charcoal<br /><strong>60% lighter</strong></div>
    <div class="lab-color-item light-text3">charcoal<br /><strong>70% lighter</strong></div>
    <div class="lab-color-item light-text2">charcoal<br /><strong>80% lighter</strong></div>
    <div class="lab-color-item light-text1">charcoal<br /><strong>90% lighter</strong></div>
</div>
 
<h3>Lighter Color</h3>

<p>This demo uses <a href="https://drafts.csswg.org/css-color-5/#color-mix">color-mix()</a>, part of the level 5 CSS color specification to lighten a black-like colors in increments of 10%.</p>

<div class="color-container">
  <div class="lab-color-item charcoal">charcoal<br /><strong>lab(12.57% 2.27 312.31)</strong></div>
  <div class="lab-color-item light-text9">charcoal<br /><strong>10% lighter</strong></div>
  <div class="lab-color-item light-text8">charcoal<br /><strong>20% lighter</strong></div>
  <div class="lab-color-item light-text7">charcoal<br /><strong>30% lighter</strong></div>
  <div class="lab-color-item light-text6">charcoal<br /><strong>40% lighter</strong></div>
  <div class="lab-color-item light-text5">charcoal<br /><strong>50% lighter</strong></div>
  <div class="lab-color-item light-text4">charcoal<br /><strong>60% lighter</strong></div>
  <div class="lab-color-item light-text3">charcoal<br /><strong>70% lighter</strong></div>
  <div class="lab-color-item light-text2">charcoal<br /><strong>80% lighter</strong></div>
  <div class="lab-color-item light-text1">charcoal<br /><strong>90% lighter</strong></div>
</div>
 
/* No context defined. */
  • Content: 
    /* color-mix() experiment: lighten a charcoal black */

:root {
  /* lightening charcoal */
  --oklch-text1: color-mix(in oklch, var(--oklch-color-charcoal) 10%, white);
  --oklch-text2: color-mix(in oklch, var(--oklch-color-charcoal) 20%, white);
  --oklch-text3: color-mix(in oklch, var(--oklch-color-charcoal) 30%, white);
  --oklch-text4: color-mix(in oklch, var(--oklch-color-charcoal) 40%, white);
  --oklch-text5: color-mix(in oklch, var(--oklch-color-charcoal) 50%, white);
  --oklch-text6: color-mix(in oklch, var(--oklch-color-charcoal) 60%, white);
  --oklch-text7: color-mix(in oklch, var(--oklch-color-charcoal) 70%, white);
  --oklch-text8: color-mix(in oklch, var(--oklch-color-charcoal) 80%, white);
  --oklch-text9: color-mix(in oklch, var(--oklch-color-charcoal) 90%, white);
}

.lch-light-text1 {
  background-color: var(--text1);
}

.lch-light-text2 {
  background-color: var(--text2);
}

.lch-light-text3 {
  background-color: var(--text3);
}

.lch-light-text4 {
  background-color: var(--text4);
}

.lch-light-text5 {
  background-color: var(--text5);
}

.lch-light-text6 {
  background-color: var(--text6);
}

.lch-light-text7 {
  background-color: var(--text7);
}

.lch-light-text8 {
  background-color: var(--text8);
}

.lch-light-text9 {
  background-color: var(--text9);
  color: #fff;
}
  • URL: /components/raw/oklch-colors/oklch-color-mix01.css
  • Filesystem Path: src/components/01-atoms/03-colors/05-oklch-colors/oklch-color-mix01.css
  • Size: 1.3 KB
  • Content: 
    /* color-mix() experiment: darken a dark green mint color  */

:root {
  --lch-dark-text1: color-mix(in lab, var(--lab-color-mint) 10%, black);
  --lch-dark-text2: color-mix(in lab, var(--lab-color-mint) 20%, black);
  --lch-dark-text3: color-mix(in lab, var(--lab-color-mint) 30%, black);
  --lch-dark-text4: color-mix(in lab, var(--lab-color-mint) 40%, black);
  --lch-dark-text5: color-mix(in lab, var(--lab-color-mint) 50%, black);
  --lch-dark-text6: color-mix(in lab, var(--lab-color-mint) 60%, black);
  --lch-dark-text7: color-mix(in lab, var(--lab-color-mint) 70%, black);
  --lch-dark-text8: color-mix(in lab, var(--lab-color-mint) 80%, black);
  --lch-dark-text9: color-mix(in lab, var(--lab-color-mint) 90%, black);
}

.lch-dark-text1 {
  background-color: var(--lch-dark-text1);
  color: #fff;
}

.lch-dark-text2 {
  background-color: var(--lch-dark-text2);
  color: #fff;
}

.lch-dark-text3 {
  background-color: var(--lch-dark-text3);
  color: #fff;
}

.lch-dark-text4 {
  background-color: var(--lch-dark-text4);
  color: #fff;
}

.lch-dark-text5 {
  background-color: var(--lch-dark-text5);
  color: #fff;
}

.lch-dark-text6 {
  background-color: var(--lch-dark-text6);
  color: #fff;
}

.lch-dark-text7 {
  background-color: var(--lch-dark-text7);
  color: #fff;
}

.lch-dark-text8 {
  background-color: var(--lch-dark-text8);
  color: #fff;
}

.lch-dark-text9 {
  background-color: var(--lch-dark-text9);
  color: #fff;
}
  • URL: /components/raw/oklch-colors/oklch-color-mix02.css
  • Filesystem Path: src/components/01-atoms/03-colors/05-oklch-colors/oklch-color-mix02.css
  • Size: 1.4 KB
  • Content: 
    :root {
  --oklch-color-white: oklch(1 0 326);
  --oklch-color-alabaster: oklch(0.99 0.01 88.7);
  --oklch-color-snow: oklch(0.99 0.01 190);
  --oklch-color-ivory: oklch(0.98 0.02 89.2);
  --oklch-color-cream: oklch(0.98 0.04 101);
  --oklch-color-eggshell: oklch(0.98 0.03 96.4);
  --oklch-color-cotton: oklch(0.99 0.01 116);
  --oklch-color-chiffon: oklch(0.98 0.01 107);
  --oklch-color-salt: oklch(0.96 0.01 39.4);
  --oklch-color-lace: oklch(0.97 0.01 74.4);
  --oklch-color-coconut: oklch(0.97 0.02 60.8);
  --oklch-color-linen: oklch(0.94 0.03 93.5);
  --oklch-color-bone: oklch(0.9 0.03 87.9);
  --oklch-color-porcelain: oklch(1 0 106);
  --oklch-color-parchment: oklch(0.97 0.03 94.9);
  --oklch-color-rice: oklch(0.98 0.01 76.6);
  --oklch-color-blue: oklch(0.56 0.18 254);
  --oklch-color-navy: oklch(0.24 0.07 252);
  --oklch-color-aqua: oklch(0.85 0.1 225);
  --oklch-color-sky: oklch(0.73 0.16 238);
  --oklch-color-teal: oklch(0.77 0.12 195);
  --oklch-color-slate: oklch(0.58 0.02 264);
  --oklch-color-indigo: oklch(0.29 0.11 285);
  --oklch-color-cobalt: oklch(0.42 0.21 265);
  --oklch-color-ocean: oklch(0.44 0.07 199);
  --oklch-color-peacock: oklch(0.27 0.05 217);
  --oklch-color-azure: oklch(0.36 0.2 268);
  --oklch-color-cerulean: oklch(0.62 0.12 231);
  --oklch-color-lapis: oklch(0.42 0.22 269);
  --oklch-color-spruce: oklch(0.35 0.03 240);
  --oklch-color-stone: oklch(0.56 0.05 238);
  --oklch-color-aegean: oklch(0.38 0.08 252);
  --oklch-color-berry: oklch(0.29 0.14 280);
  --oklch-color-denim: oklch(0.24 0.06 268);
  --oklch-color-admiral: oklch(0.31 0.2 265);
  --oklch-color-sapphire: oklch(0.71 0.09 208);
  --oklch-color-arctic: oklch(0.89 0.1 208);
  --oklch-color-tan: oklch(0.89 0.06 97.4);
  --oklch-color-beige: oklch(0.89 0.09 96.3);
  --oklch-color-macaroon: oklch(0.9 0.13 96.8);
  --oklch-color-hazelwood: oklch(0.79 0.06 94.2);
  --oklch-color-granola: oklch(0.79 0.12 91.1);
  --oklch-color-oat: oklch(0.84 0.08 91.8);
  --oklch-color-eggnog: oklch(0.92 0.09 90.4);
  --oklch-color-fawn: oklch(0.74 0.11 90.6);
  --oklch-color-sugarcookie: oklch(0.93 0.08 102);
  --oklch-color-sand: oklch(0.79 0.11 90.5);
  --oklch-color-sepia: oklch(0.8 0.09 74.7);
  --oklch-color-latte: oklch(0.83 0.1 80.7);
  --oklch-color-oyster: oklch(0.87 0.07 103);
  --oklch-color-biscotti: oklch(0.83 0.12 92.3);
  --oklch-color-parmesean: oklch(0.93 0.11 96.1);
  --oklch-color-hazelnut: oklch(0.73 0.1 91.5);
  --oklch-color-sandcastle: oklch(0.82 0.09 90.3);
  --oklch-color-buttermilk: oklch(0.95 0.08 96.7);
  --oklch-color-sanddollar: oklch(0.92 0.06 103);
  --oklch-color-shortbread: oklch(0.93 0.11 96.1);
  --oklch-color-yellow: oklch(0.9 0.19 97.4);
  --oklch-color-canary: oklch(0.85 0.17 90.4);
  --oklch-color-gold: oklch(0.79 0.17 73.3);
  --oklch-color-daffodil: oklch(0.94 0.12 101);
  --oklch-color-flaxen: oklch(0.78 0.12 90.9);
  --oklch-color-butter: oklch(0.91 0.18 99.7);
  --oklch-color-lemon: oklch(0.96 0.18 114);
  --oklch-color-mustard: oklch(0.8 0.15 87.8);
  --oklch-color-corn: oklch(0.84 0.18 101);
  --oklch-color-medallion: oklch(0.78 0.16 87.6);
  --oklch-color-dandelion: oklch(0.87 0.17 91);
  --oklch-color-bumblebee: oklch(0.91 0.19 101);
  --oklch-color-banana: oklch(0.96 0.1 103);
  --oklch-color-butterscotch: oklch(0.83 0.17 84.9);
  --oklch-color-dijon: oklch(0.69 0.14 85);
  --oklch-color-honey: oklch(0.75 0.16 69.6);
  --oklch-color-blonde: oklch(0.93 0.14 101);
  --oklch-color-pineapple: oklch(0.91 0.18 99.8);
  --oklch-color-tuscansun: oklch(0.87 0.17 92.8);
  --oklch-color-orange: oklch(0.74 0.18 53.5);
  --oklch-color-tangerine: oklch(0.73 0.17 51.9);
  --oklch-color-merigold: oklch(0.81 0.16 74.9);
  --oklch-color-cider: oklch(0.59 0.13 56.2);
  --oklch-color-rust: oklch(0.46 0.12 49.7);
  --oklch-color-ginger: oklch(0.57 0.15 49.7);
  --oklch-color-tiger: oklch(0.7 0.2 45.6);
  --oklch-color-bronze: oklch(0.56 0.14 50.9);
  --oklch-color-cantaloupe: oklch(0.79 0.13 47.7);
  --oklch-color-apricot: oklch(0.71 0.17 57.1);
  --oklch-color-carrot: oklch(0.68 0.18 49.1);
  --oklch-color-squash: oklch(0.6 0.16 48.5);
  --oklch-color-spice: oklch(0.42 0.11 52.4);
  --oklch-color-marmalade: oklch(0.62 0.16 49.6);
  --oklch-color-amber: oklch(0.44 0.13 42.7);
  --oklch-color-sandstone: oklch(0.65 0.15 52);
  --oklch-color-yam: oklch(0.6 0.17 46.7);
  --oklch-color-red: oklch(0.66 0.23 28.4);
  --oklch-color-cherry: oklch(0.44 0.17 30.4);
  --oklch-color-rose: oklch(0.59 0.22 26.5);
  --oklch-color-jam: oklch(0.32 0.11 28.5);
  --oklch-color-merlot: oklch(0.32 0.08 26.9);
  --oklch-color-garnet: oklch(0.31 0.12 30);
  --oklch-color-crimson: oklch(0.5 0.2 29.2);
  --oklch-color-ruby: oklch(0.41 0.17 29.2);
  --oklch-color-scarlet: oklch(0.42 0.16 29.1);
  --oklch-color-redwine: oklch(0.27 0.1 29);
  --oklch-color-redapple: oklch(0.47 0.18 30.2);
  --oklch-color-mahogany: oklch(0.25 0.08 28.6);
  --oklch-color-blood: oklch(0.35 0.13 30.2);
  --oklch-color-sangria: oklch(0.33 0.1 28.1);
  --oklch-color-currant: oklch(0.33 0.12 29.2);
  --oklch-color-blush: oklch(0.57 0.14 27.7);
  --oklch-color-candy: oklch(0.55 0.22 30.2);
  --oklch-color-lipstick: oklch(0.44 0.17 30.4);
  --oklch-color-pink: oklch(0.79 0.13 346);
  --oklch-color-fuchsia: oklch(0.65 0.27 341);
  --oklch-color-punch: oklch(0.67 0.2 10);
  --oklch-color-watermelon: oklch(0.75 0.15 7.5);
  --oklch-color-flamingo: oklch(0.81 0.11 5.11);
  --oklch-color-rouge: oklch(0.7 0.17 7.51);
  --oklch-color-salmon: oklch(0.82 0.1 28.6);
  --oklch-color-coral: oklch(0.73 0.16 31.2);
  --oklch-color-peach: oklch(0.77 0.13 30.2);
  --oklch-color-strawberry: oklch(0.67 0.21 24.5);
  --oklch-color-rosewood: oklch(0.51 0.13 22.7);
  --oklch-color-lemonade: oklch(0.85 0.08 1.31);
  --oklch-color-taffy: oklch(0.76 0.16 348);
  --oklch-color-bubblegum: oklch(0.71 0.21 355);
  --oklch-color-balletslipper: oklch(0.79 0.12 354);
  --oklch-color-crepe: oklch(0.84 0.07 1.58);
  --oklch-color-maroon: oklch(0.41 0.15 358);
  --oklch-color-hotpink: oklch(0.66 0.26 356);
  --oklch-color-purple: oklch(0.55 0.26 321);
  --oklch-color-mauve: oklch(0.49 0.11 318);
  --oklch-color-violet: oklch(0.41 0.2 315);
  --oklch-color-boysenberry: oklch(0.33 0.13 357);
  --oklch-color-lavender: oklch(0.8 0.14 319);
  --oklch-color-plum: oklch(0.34 0.1 360);
  --oklch-color-lilac: oklch(0.63 0.18 319);
  --oklch-color-periwinkle: oklch(0.73 0.1 314);
  --oklch-color-eggplant: oklch(0.25 0.07 327);
  --oklch-color-iris: oklch(0.6 0.15 307);
  --oklch-color-heather: oklch(0.64 0.1 307);
  --oklch-color-amethyst: oklch(0.62 0.2 306);
  --oklch-color-raisin: oklch(0.2 0.06 358);
  --oklch-color-orchid: oklch(0.66 0.2 306);
  --oklch-color-mulberry: oklch(0.27 0.11 4.92);
  --oklch-color-green: oklch(0.74 0.22 144);
  --oklch-color-chartreuse: oklch(0.91 0.23 129);
  --oklch-color-juniper: oklch(0.41 0.1 129);
  --oklch-color-sage: oklch(0.61 0.06 138);
  --oklch-color-lime: oklch(0.87 0.25 149);
  --oklch-color-fern: oklch(0.72 0.15 145);
  --oklch-color-olive: oklch(0.76 0.13 128);
  --oklch-color-emerald: oklch(0.55 0.18 143);
  --oklch-color-pear: oklch(0.71 0.18 132);
  --oklch-color-moss: oklch(0.49 0.12 132);
  --oklch-color-shamrock: oklch(0.65 0.22 143);
  --oklch-color-seafoam: oklch(0.84 0.18 156);
  --oklch-color-pine: oklch(0.39 0.09 141);
  --oklch-color-parakeet: oklch(0.7 0.21 147);
  --oklch-color-mint: oklch(0.88 0.1 162);
  --oklch-color-seaweed: oklch(0.38 0.07 132);
  --oklch-color-pickle: oklch(0.55 0.11 131);
  --oklch-color-pistachio: oklch(0.84 0.04 161);
  --oklch-color-basil: oklch(0.45 0.1 142);
  --oklch-color-crocodile: oklch(0.55 0.1 129);
  --oklch-color-brown: oklch(0.22 0.03 66.9);
  --oklch-color-coffee: oklch(0.35 0.05 73.3);
  --oklch-color-mocha: oklch(0.3 0.05 74.1);
  --oklch-color-peanut: oklch(0.5 0.07 74);
  --oklch-color-carob: oklch(0.28 0.04 76.2);
  --oklch-color-hickory: oklch(0.26 0.05 46.6);
  --oklch-color-pecan: oklch(0.31 0.06 46.5);
  --oklch-color-walnut: oklch(0.3 0.05 56.9);
  --oklch-color-caramel: oklch(0.39 0.08 55);
  --oklch-color-gingerbread: oklch(0.35 0.09 52.9);
  --oklch-color-chocolate: oklch(0.23 0.05 59.9);
  --oklch-color-tortilla: oklch(0.6 0.07 75.4);
  --oklch-color-umber: oklch(0.28 0.04 61.9);
  --oklch-color-tawny: oklch(0.46 0.09 56.9);
  --oklch-color-brunette: oklch(0.27 0.05 57.6);
  --oklch-color-cinammon: oklch(0.36 0.09 44.9);
  --oklch-color-penny: oklch(0.33 0.07 45.4);
  --oklch-color-grey: oklch(0.74 0 0);
  --oklch-color-shadow: oklch(0.34 0 0);
  --oklch-color-graphite: oklch(0.44 0.03 319);
  --oklch-color-iron: oklch(0.31 0.01 338);
  --oklch-color-pewter: oklch(0.53 0.04 289);
  --oklch-color-cloud: oklch(0.83 0.02 286);
  --oklch-color-silver: oklch(0.9 0 0);
  --oklch-color-smoke: oklch(0.45 0.02 311);
  --oklch-color-anchor: oklch(0.38 0.02 286);
  --oklch-color-ash: oklch(0.43 0.01 9.96);
  --oklch-color-porpoise: oklch(0.42 0.03 288);
  --oklch-color-dove: oklch(0.56 0.03 320);
  --oklch-color-fog: oklch(0.48 0.02 326);
  --oklch-color-flint: oklch(0.6 0.05 286);
  --oklch-color-pebble: oklch(0.32 0 0);
  --oklch-color-lead: oklch(0.37 0.03 288);
  --oklch-color-coin: oklch(0.68 0.03 288);
  --oklch-color-fossil: oklch(0.56 0.01 338);
  --oklch-color-black: oklch(0.18 0 0);
  --oklch-color-ebony: oklch(0.11 0.02 71.8);
  --oklch-color-crow: oklch(0.25 0.01 67.5);
  --oklch-color-charcoal: oklch(0.25 0.01 315);
}

.color-container {
  display: flex;
  flex-flow: row wrap;
  gap: 1em;
}

.color-item {
  border: 2px solid var(--oklch-color-black);
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
}

.white {background-color: var(--oklch-color-white);}
.pearl {background-color: var(--oklch-color-pearl);}
.alabaster {background-color: var(--oklch-color-alabaster);}
.snow {background-color: var(--oklch-color-snow);}
.ivory {background-color: var(--oklch-color-ivory);}
.cream {background-color: var(--oklch-color-cream);}
.eggshell {background-color: var(--oklch-color-eggshell);}
.cotton {background-color: var(--oklch-color-cotton);}
.chiffon {background-color: var(--oklch-color-chiffon);}
.salt {background-color: var(--oklch-color-salt);}
.lace {background-color: var(--oklch-color-lace);}
.coconut {background-color: var(--oklch-color-coconut);}
.linen {background-color: var(--oklch-color-linen);}
.bone {background-color: var(--oklch-color-bone);}
.porcelain {background-color: var(--oklch-color-porcelain);}
.parchment {background-color: var(--oklch-color-parchment);}
.rice {background-color: var(--oklch-color-rice);}
    
  /* blues */
    
.blue {color: white; background-color: var(--oklch-color-blue);}
.navy {color: white; background-color: var(--oklch-color-navy);}
.aqua {color: white; background-color: var(--oklch-color-aqua);}
.sky {color: white; background-color: var(--oklch-color-sky);}
.teal {color: white; background-color: var(--oklch-color-teal);}
.slate {color: white; background-color: var(--oklch-color-slate);}
.indigo {color: white; background-color: var(--oklch-color-indigo);}
.cobalt {color: white; background-color: var(--oklch-color-cobalt);}
.ocean {color: white; background-color: var(--oklch-color-ocean);}
.peacock {color: white; background-color: var(--oklch-color-peacock);}
.azure {color: white; background-color: var(--oklch-color-azure);}
.cerulean {color: white; background-color: var(--oklch-color-cerulean);}
.lapis {color: white; background-color: var(--oklch-color-lapis);}
.spruce {color: white; background-color: var(--oklch-color-spruce);}
.stone {color: white; background-color: var(--oklch-color-stone);}
.aegean {color: white; background-color: var(--oklch-color-aegean);}
.berry {color: white; background-color: var(--oklch-color-berry);}
.denim {color: white; background-color: var(--oklch-color-denim);}
.admiral {color: white; background-color: var(--oklch-color-admiral);}
.sapphire {color: white; background-color: var(--oklch-color-sapphire);}
.arctic {color: white; background-color: var(--oklch-color-arctic);}
  
  /* browns */
    
.tan {background-color: var(--oklch-color-tan);}
.beige {background-color: var(--oklch-color-beige);}
.macaroon {background-color: var(--oklch-color-macaroon);}
.hazelwood {background-color: var(--oklch-color-hazelwood);}
.granola {background-color: var(--oklch-color-granola);}
.oat {background-color: var(--oklch-color-oat);}
.eggnog {background-color: var(--oklch-color-eggnog);}
.fawn {background-color: var(--oklch-color-fawn);}
.sugarcookie {background-color: var(--oklch-color-sugarcookie);}
.sand {background-color: var(--oklch-color-sand);}
.sepia {background-color: var(--oklch-color-sepia);}
.latte {background-color: var(--oklch-color-latte);}
.oyster {background-color: var(--oklch-color-oyster);}
.biscotti {background-color: var(--oklch-color-biscotti);}
.parmesean {background-color: var(--oklch-color-parmesean);}
.hazelnut {background-color: var(--oklch-color-hazelnut);}
.sandcastle {background-color: var(--oklch-color-sandcastle);}
.buttermilk {background-color: var(--oklch-color-buttermilk);}
.sanddollar {background-color: var(--oklch-color-sanddollar);}
.shortbread {background-color: var(--oklch-color-shortbread);}
  
  /* yellows */
    
.yellow {background-color: var(--oklch-color-yellow);}
.canary {background-color: var(--oklch-color-canary);}
.gold {background-color: var(--oklch-color-gold);}
.daffodil {background-color: var(--oklch-color-daffodil);}
.flaxen {background-color: var(--oklch-color-flaxen);}
.butter {background-color: var(--oklch-color-butter);}
.lemon {background-color: var(--oklch-color-lemon);}
.mustard {background-color: var(--oklch-color-mustard);}
.corn {background-color: var(--oklch-color-corn);}
.medallion {background-color: var(--oklch-color-medallion);}
.dandelion {background-color: var(--oklch-color-dandelion);}
.bumblebee {background-color: var(--oklch-color-bumblebee);}
.banana {background-color: var(--oklch-color-banana);}
.butterscotch {background-color: var(--oklch-color-butterscotch);}
.dijon {background-color: var(--oklch-color-dijon);}
.honey {background-color: var(--oklch-color-honey);}
.blonde {background-color: var(--oklch-color-blonde);}
.pineapple {background-color: var(--oklch-color-pineapple);}
.tuscansun {background-color: var(--oklch-color-tuscansun);}
  
  /* oranges */
  
.orange {background-color: var(--oklch-color-orange);}
.tangerine {background-color: var(--oklch-color-tangerine);}
.merigold {background-color: var(--oklch-color-merigold);}
.cider {background-color: var(--oklch-color-cider);}
.rust {background-color: var(--oklch-color-rust);}
.ginger {background-color: var(--oklch-color-ginger);}
.tiger {background-color: var(--oklch-color-tiger);}
.bronze {background-color: var(--oklch-color-bronze);}
.cantaloupe {background-color: var(--oklch-color-cantaloupe);}
.apricot {background-color: var(--oklch-color-apricot);}
.carrot {background-color: var(--oklch-color-carrot);}
.squash {background-color: var(--oklch-color-squash);}
.spice {background-color: var(--oklch-color-spice);}
.marmalade {background-color: var(--oklch-color-marmalade);}
.amber {background-color: var(--oklch-color-amber);}
.sandstone {background-color: var(--oklch-color-sandstone);}
.yam {background-color: var(--oklch-color-yam);}
  
  /* reds */
    
.red {color: white;background-color: var(--oklch-color-red);}
.cherry {color: white;background-color: var(--oklch-color-cherry);}
.rose {color: white;background-color: var(--oklch-color-rose);}
.jam {color: white;background-color: var(--oklch-color-jam);}
.merlot {color: white;background-color: var(--oklch-color-merlot);}
.garnet {color: white;background-color: var(--oklch-color-garnet);}
.crimson {color: white;background-color: var(--oklch-color-crimson);}
.ruby {color: white;background-color: var(--oklch-color-ruby);}
.scarlet {color: white;background-color: var(--oklch-color-scarlet);}
.redwine {color: white;background-color: var(--oklch-color-redwine);}
.redapple {color: white;background-color: var(--oklch-color-redapple);}
.mahogany {color: white;background-color: var(--oklch-color-mahogany);}
.blood {color: white;background-color: var(--oklch-color-blood);}
.sangria {color: white;background-color: var(--oklch-color-sangria);}
.currant {color: white;background-color: var(--oklch-color-currant);}
.blush {color: white;background-color: var(--oklch-color-blush);}
.candy {color: white;background-color: var(--oklch-color-candy);}
.lipstick {color: white;background-color: var(--oklch-color-lipstick);}
  
  /* pinks */
    
.pink {color: white; background-color: var(--oklch-color-pink);}
.fuchsia {color: white; background-color: var(--oklch-color-fuchsia);}
.punch {color: white; background-color: var(--oklch-color-punch);}
.watermelon {color: white; background-color: var(--oklch-color-watermelon);}
.flamingo {color: white; background-color: var(--oklch-color-flamingo);}
.rouge {color: white; background-color: var(--oklch-color-rouge);}
.salmon {color: white; background-color: var(--oklch-color-salmon);}
.coral {color: white; background-color: var(--oklch-color-coral);}
.peach {color: white; background-color: var(--oklch-color-peach);}
.strawberry {color: white; background-color: var(--oklch-color-strawberry);}
.rosewood {color: white; background-color: var(--oklch-color-rosewood);}
.lemonade {color: white; background-color: var(--oklch-color-lemonade);}
.taffy {color: white; background-color: var(--oklch-color-taffy);}
.bubblegum {color: white; background-color: var(--oklch-color-bubblegum);}
.balletslipper {color: white; background-color: var(--oklch-color-balletslipper);}
.crepe {color: white; background-color: var(--oklch-color-crepe);}
.maroon {color: white; background-color: var(--oklch-color-maroon);}
.hotpink {color: white; background-color: var(--oklch-color-hotpink);}
  
  /* purples */
  
.purple {color: white; background-color: var(--oklch-color-purple);}
.mauve {color: white; background-color: var(--oklch-color-mauve);}
.violet {color: white; background-color: var(--oklch-color-violet);}
.boysenberry {color: white; background-color: var(--oklch-color-boysenberry);}
.lavender {color: white; background-color: var(--oklch-color-lavender);}
.plum {color: white; background-color: var(--oklch-color-plum);}
.lilac {color: white; background-color: var(--oklch-color-lilac);}
.periwinkle {color: white; background-color: var(--oklch-color-periwinkle);}
.eggplant {color: white; background-color: var(--oklch-color-eggplant);}
.iris {color: white; background-color: var(--oklch-color-iris);}
.heather {color: white; background-color: var(--oklch-color-heather);}
.amethyst {color: white; background-color: var(--oklch-color-amethyst);}
.raisin {color: white; background-color: var(--oklch-color-raisin);}
.orchid {color: white; background-color: var(--oklch-color-orchid);}
.mulberry {color: white; background-color: var(--oklch-color-mulberry);}
  
  /* greens */
    
.green {color: white; background-color: var(--oklch-color-green);}
.chartreuse {color: white; background-color: var(--oklch-color-chartreuse);}
.juniper {color: white; background-color: var(--oklch-color-juniper);}
.sage {color: white; background-color: var(--oklch-color-sage);}
.lime {color: white; background-color: var(--oklch-color-lime);}
.fern {color: white; background-color: var(--oklch-color-fern);}
.olive {color: white; background-color: var(--oklch-color-olive);}
.emerald {color: white; background-color: var(--oklch-color-emerald);}
.pear {color: white; background-color: var(--oklch-color-pear);}
.moss {color: white; background-color: var(--oklch-color-moss);}
.shamrock {color: white; background-color: var(--oklch-color-shamrock);}
.seafoam {color: white; background-color: var(--oklch-color-seafoam);}
.pine {color: white; background-color: var(--oklch-color-pine);}
.parakeet {color: white; background-color: var(--oklch-color-parakeet);}
.mint {color: white; background-color: var(--oklch-color-mint);}
.seaweed {color: white; background-color: var(--oklch-color-seaweed);}
.pickle {color: white; background-color: var(--oklch-color-pickle);}
.pistachio {color: white; background-color: var(--oklch-color-pistachio);}
.basil {color: white; background-color: var(--oklch-color-basil);}
.crocodile {color: white; background-color: var(--oklch-color-crocodile);}
  
  /* browns */
    
.brown {color: white; background-color: var(--oklch-color-brown);}
.coffee {color: white; background-color: var(--oklch-color-coffee);}
.mocha {color: white; background-color: var(--oklch-color-mocha);}
.peanut {color: white; background-color: var(--oklch-color-peanut);}
.carob {color: white; background-color: var(--oklch-color-carob);}
.hickory {color: white; background-color: var(--oklch-color-hickory);}
.pecan {color: white; background-color: var(--oklch-color-pecan);}
.walnut {color: white; background-color: var(--oklch-color-walnut);}
.caramel {color: white; background-color: var(--oklch-color-caramel);}
.gingerbread {color: white; background-color: var(--oklch-color-gingerbread);}
.chocolate {color: white; background-color: var(--oklch-color-chocolate);}
.tortilla {color: white; background-color: var(--oklch-color-tortilla);}
.umber {color: white; background-color: var(--oklch-color-umber);}
.tawny {color: white; background-color: var(--oklch-color-tawny);}
.brunette {color: white; background-color: var(--oklch-color-brunette);}
.cinammon {color: white; background-color: var(--oklch-color-cinammon);}
.penny {color: white; background-color: var(--oklch-color-penny);}
  
  /* greys */
    
.grey {color: white; background-color: var(--oklch-color-grey);}
.shadow {color: white; background-color: var(--oklch-color-shadow);}
.graphite {color: white; background-color: var(--oklch-color-graphite);}
.iron {color: white; background-color: var(--oklch-color-iron);}
.pewter {color: white; background-color: var(--oklch-color-pewter);}
.cloud {color: white; background-color: var(--oklch-color-cloud);}
.silver {color: white; background-color: var(--oklch-color-silver);}
.smoke {color: white; background-color: var(--oklch-color-smoke);}
.anchor {color: white; background-color: var(--oklch-color-anchor);}
.ash {color: white; background-color: var(--oklch-color-ash);}
.porpoise {color: white; background-color: var(--oklch-color-porpoise);}
.dove {color: white; background-color: var(--oklch-color-dove);}
.fog {color: white; background-color: var(--oklch-color-fog);}
.flint {color: white; background-color: var(--oklch-color-flint);}
.pebble {color: white; background-color: var(--oklch-color-pebble);}
.lead {color: white; background-color: var(--oklch-color-lead);}
.coin {color: white; background-color: var(--oklch-color-coin);}
.fossil {color: white; background-color: var(--oklch-color-fossil);}
    
  /* blacks */
    
.black {color: white; background-color: var(--oklch-color-black);}
.ebony {color: white; background-color: var(--oklch-color-ebony);}
.crow {color: white; background-color: var(--oklch-color-crow);}
.charcoal {color: white; background-color: var(--oklch-color-charcoal);}
  • URL: /components/raw/oklch-colors/oklch-colors.css
  • Filesystem Path: src/components/01-atoms/03-colors/05-oklch-colors/oklch-colors.css
  • Size: 23.1 KB
  • Content: 
    :root {
  --oklch-color-plum-crazy: oklch(0.45 0.25 294);
  --oklch-color-cherry: oklch(0.55 0.22 22.6);
  --oklch-color-black-cherry: oklch(0.33 0.07 352);
  --oklch-color-panther-pink: oklch(0.58 0.19 340);
  --oklch-color-green-go: oklch(0.61 0.15 148);
  --oklch-color-sublime-green: oklch(0.83 0.2 129);
  --oklch-color-go-mango: oklch(0.62 0.17 28.2);
  --oklch-color-butterscotch: oklch(0.69 0.14 67);
  --oklch-color-bright-green: oklch(0.88 0.28 138);
  --oklch-color-top-banana: oklch(0.93 0.17 103);
  --oklch-color-citron-yella: oklch(0.7 0.15 114);
  --oklch-color-rebeccapurple: oklch(0.44 0.16 303);
}


.hemi-orange {  background-color: var(--oklch-color-hemi-orange); color: white; }
.plum-crazy {  background-color: var(--oklch-color-plum-crazy); color: white; }
.cherry {  background-color: var(--oklch-color-cherry:); color: white; }
.black-cherry {  background-color: var(--oklch-color-black-cherry); color: white; }
.panther-pink {  background-color: var(--oklch-color-panther-pink); color: white; }
.green-go {  background-color: var(--oklch-color-green-go); color: white; }
.sublime-green {  background-color: var(--oklch-color-sublime-green); color: white; }
.go-mango {  background-color: var(--oklch-color-go-mango); color: white; }
.butterscotch: {  background-color: var(--oklch-color-butterscotch); color: white; }
.bright-green {  background-color: var(--oklch-color-bright-green); color: white; }
.top-banana {  background-color: var(--oklch-color-top-banana); color: white; }
.citron-yella {  background-color: var(--oklch-color-citron-yella); color: white; }
.panther-pink {  background-color: var(--oklch-color-panther-pink); color: white; }
.rebeccapurple {  background-color: var(--oklch-color-rebeccapurple); color: white; }

.lch-hemi-orange {  background-color: var(--oklch-color-hemi-orange); color: white; }
.lch-plum-crazy {  background-color: var(--oklch-color-plum-crazy); color: white; }
.lch-cherry {  background-color: var(--oklch-color-cherry:); color: white; }
.lch-black-cherry {  background-color: var(--oklch-color-black-cherry); color: white; }
.lch-panther-pink {  background-color: var(--oklch-color-panther-pink); color: white; }
.lch-green-go {  background-color: var(--oklch-color-green-go); color: white; }
.lch-sublime-green {  background-color: var(--oklch-color-sublime-green); color: white; }
.lch-go-mango {  background-color: var(--oklch-color-go-mango); color: white; }
.lch-butterscotch: {  background-color: var(--oklch-color-butterscotch); color: white; }
.lch-bright-green {  background-color: var(--oklch-color-bright-green); color: white; }
.lch-top-banana {  background-color: var(--oklch-color-top-banana); color: white; }
.lch-citron-yella {  background-color: var(--oklch-color-citron-yella); color: white; }
.lch-panther-pink {  background-color: var(--oklch-color-panther-pink); color: white; }
.lch-rebeccapurple {  background-color: var(--oklch-color-rebeccapurple); color: white; }
  • URL: /components/raw/oklch-colors/oklch-funk.css
  • Filesystem Path: src/components/01-atoms/03-colors/05-oklch-colors/oklch-funk.css
  • Size: 3 KB
  • Content: 
    :root {
  --theme-primary: #663399;
  --theme-primary-900: lab(from var(--theme-primary) 10% a b);
  --theme-primary-800: lab(from var(--theme-primary) 20% a b);
  --theme-primary-700: lab(from var(--theme-primary) 30% a b);
  --theme-primary-600: lab(from var(--theme-primary) 40% a b);
  --theme-primary-500: lab(from var(--theme-primary) 50% a b);
  --theme-primary-400: lab(from var(--theme-primary) 60% a b);
  --theme-primary-300: lab(from var(--theme-primary) 70% a b);
  --theme-primary-200: lab(from var(--theme-primary) 80% a b);
  --theme-primary-100: lab(from var(--theme-primary) 90% a b);

  --theme-secondary: #2632c2;
  --theme-secondary-900: lab(from var(--theme-secondary) 10% a b);
  --theme-secondary-800: lab(from var(--theme-secondary) 20% a b);
  --theme-secondary-700: lab(from var(--theme-secondary) 30% a b);
  --theme-secondary-600: lab(from var(--theme-secondary) 40% a b);
  --theme-secondary-500: lab(from var(--theme-secondary) 50% a b);
  --theme-secondary-400: lab(from var(--theme-secondary) 60% a b);
  --theme-secondary-300: lab(from var(--theme-secondary) 70% a b);
  --theme-secondary-200: lab(from var(--theme-secondary) 80% a b);
  --theme-secondary-100: lab(from var(--theme-secondary) 90% a b);

  --theme-tertiary: #d2042d;
  --theme-tertiary-100: lab(from var(--theme-tertiary) 90% a b);
  --theme-tertiary-200: lab(from var(--theme-tertiary) 80% a b);
  --theme-tertiary-300: lab(from var(--theme-tertiary) 70% a b);
  --theme-tertiary-400: lab(from var(--theme-tertiary) 60% a b);
  --theme-tertiary-500: lab(from var(--theme-tertiary) 50% a b);
  --theme-tertiary-600: lab(from var(--theme-tertiary) 40% a b);
  --theme-tertiary-700: lab(from var(--theme-tertiary) 30% a b);
  --theme-tertiary-800: lab(from var(--theme-tertiary) 20% a b);
  --theme-tertiary-900: lab(from var(--theme-tertiary) 10% a b);
}

html {
  font-family: Raleway, sans-serif;
}

.outside-container {
  margin-inline: 10rem;
  margin-block-start: 4rem;
}

.explainer {
  width: 80ch;
  font-size: 1.5rem;
  margin-block-end: 2rem;
}

.container {
  display: flex;
  flex-flow: row;
}

.box {
  border: 4px solid black;
  margin-inline-end: 5px;
  margin-block: 10px;
  height: 100px;
  width: 100px;
  display: flex;
  place-content: center;
  place-items: center;
  font-size: 2rem;
}

.warning {
  color: red;
}

/* Classes for themes */

/* Primary theme */
.theme-900 {
  background: var(--theme-primary-900);
  color: color-contrast(var(--theme-primary-900) vs black, white);
}

.theme-800 {
  background: var(--theme-primary-800);
  color: color-contrast(var(--theme-primary-800) vs white, black);
}

.theme-700 {
  background: var(--theme-primary-700);
  color: color-contrast(var(--theme-primary-700) vs white, black);
}

.theme-600 {
  background: var(--theme-primary-600);
  color: color-contrast(var(--theme-primary-600) vs white, black);
}

.theme-500 {
  background: var(--theme-primary-500);
  color: color-contrast(var(--theme-primary-500) vs white, black);
}

.theme-400 {
  background: var(--theme-primary-400);
  color: color-contrast(var(--theme-primary-400) vs white, black);
}

.theme-300 {
  background: var(--theme-primary-300);
  color: color-contrast(var(--theme-primary-300) vs white, black);
}

.theme-200 {
  background: var(--theme-primary-200);
  color: color-contrast(var(--theme-primary-200) vs white, black);
}

.theme-100 {
  background: var(--theme-primary-100);
  color: color-contrast(var(--theme-primary-100) vs white, black);
}

/* Secondary theme */
.theme-secondary-900 {
  background: var(--theme-secondary-900);
  color: color-contrast(var(--theme-secondary-900) vs black, white);
}

.theme-secondary-800 {
  background: var(--theme-secondary-800);
  color: color-contrast(var(--theme-secondary-800) vs white, black);
}

.theme-secondary-700 {
  background: var(--theme-secondary-700);
  color: color-contrast(var(--theme-secondary-700) vs white, black);
}

.theme-secondary-600 {
  background: var(--theme-secondary-600);
  color: color-contrast(var(--theme-secondary-600) vs white, black);
}

.theme-secondary-500 {
  background: var(--theme-secondary-500);
  color: color-contrast(var(--theme-secondary-500) vs white, black);
}

.theme-secondary-400 {
  background: var(--theme-secondary-400);
  color: color-contrast(var(--theme-secondary-400) vs white, black);
}

.theme-secondary-300 {
  background: var(--theme-secondary-300);
  color: color-contrast(var(--theme-secondary-300) vs white, black);
}

.theme-secondary-200 {
  background: var(--theme-secondary-200);
  color: color-contrast(var(--theme-secondary-200) vs white, black);
}

.theme-secondary-100 {
  background: var(--theme-secondary-100);
  color: color-contrast(var(--theme-secondary-100) vs white, black);
}

/* Tertiary theme */
.theme-tertiary-900 {
  background: var(--theme-tertiary-900);
  color: color-contrast(var(--theme-tertiary-900) vs black, white);
}

.theme-tertiary-800 {
  background: var(--theme-tertiary-800);
  color: color-contrast(var(--theme-tertiary-800) vs white, black);
}

.theme-tertiary-700 {
  background: var(--theme-tertiary-700);
  color: color-contrast(var(--theme-tertiary-700) vs white, black);
}

.theme-tertiary-600 {
  background: var(--theme-tertiary-600);
  color: color-contrast(var(--theme-tertiary-600) vs white, black);
}

.theme-tertiary-500 {
  background: var(--theme-tertiary-500);
  color: color-contrast(var(--theme-tertiary-500) vs white, black);
}

.theme-tertiary-400 {
  background: var(--theme-tertiary-400);
  color: color-contrast(var(--theme-tertiary-400) vs white, black);
}

.theme-tertiary-300 {
  background: var(--theme-tertiary-300);
  color: color-contrast(var(--theme-tertiary-300) vs white, black);
}

.theme-tertiary-200 {
  background: var(--theme-tertiary-200);
  color: color-contrast(var(--theme-tertiary-200) vs white, black);
}

.theme-tertiary-100 {
  background: var(--theme-tertiary-100);
  color: color-contrast(var(--theme-tertiary-100) vs white, black);
}
  • URL: /components/raw/oklch-colors/oklch-relative-colors.css
  • Filesystem Path: src/components/01-atoms/03-colors/05-oklch-colors/oklch-relative-colors.css
  • Size: 6 KB

No notes defined.