rivendellweb pattern library

LAB 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>

<p><strong>Note: This demo only works in Firefox Nighttly and Safari TP122 or later with the `css color-mix()` experimental feature enabled as of 11/25/21. Because it is a demo, do not use in production!</strong></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>

<p><strong>Note: This demo only works in Firefox Nighttly and Safari TP122 or later with the `css color-mix()` experimental feature enabled as of 11/25/21. Because it is a demo, do not use in production!</strong></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 */
  --text1: color-mix(in lab, var(--lab-color-charcoal) 10%, white);
  --text2: color-mix(in lab, var(--lab-color-charcoal) 20%, white);
  --text3: color-mix(in lab, var(--lab-color-charcoal) 30%, white);
  --text4: color-mix(in lab, var(--lab-color-charcoal) 40%, white);
  --text5: color-mix(in lab, var(--lab-color-charcoal) 50%, white);
  --text6: color-mix(in lab, var(--lab-color-charcoal) 60%, white);
  --text7: color-mix(in lab, var(--lab-color-charcoal) 70%, white);
  --text8: color-mix(in lab, var(--lab-color-charcoal) 80%, white);
  --text9: color-mix(in lab, var(--lab-color-charcoal) 90%, white);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dark-text9 {
  background-color: var(--dark-text9);
  color: #fff;
}
  • URL: /components/raw/lab-colors/lab-color-mix02.css
  • Filesystem Path: src/components/01-atoms/03-colors/06-lab-colors/lab-color-mix02.css
  • Size: 1.3 KB
  • Content: 
    /* CSS HSL */
:root {
  /* whites */
  --lab-color-white: lab(99.07 0.08 1.08);
  --lab-color-alabaster: lab(98.38 0.11 5.31);
  --lab-color-snow: lab(98.38 0.11 5.31);
  --lab-color-ivory: lab(97.42 0.2 9.56);
  --lab-color-cream: lab(98.3 -2.59 16.39);
  --lab-color-eggshell: lab(97.88 -0.98 11.23);
  --lab-color-cotton: lab(98.78 -0.99 2.27);
  --lab-color-chiffon: lab(98.09 -1.16 4.33);
  --lab-color-salt: lab(95.1 2.75 2.59);
  --lab-color-lace: lab(96.2 1.29 5.23);
  --lab-color-coconut: lab(96.04 3.53 7.11);
  --lab-color-linen: lab(93.13 -0.49 12.58);
  --lab-color-bone: lab(89.01 0.46 10.4);
  --lab-color-porcelain: lab(99.94 -0.39 1.43);
  --lab-color-parchment: lab(96.9 -0.74 11.87);
  --lab-color-rice: lab(97.13 0.83 3.99);
    
  /* blues */
    
  --lab-color-blue: lab(47.91 2.96 -60.44);
  --lab-color-navy: lab(11.16 0.04 -24.11);
  --lab-color-aqua: lab(82.68 -21.41 -26.63);
  --lab-color-sky: lab(68 -17.9 -49.53);
  --lab-color-teal: lab(74.74 -38.98 -11.71);
  --lab-color-slate: lab(51.41 -0.37 -7.37);
  --lab-color-indigo: lab(15.83 19.9 -36.9);
  --lab-color-cobalt: lab(29.6 31.16 -74.08);
  --lab-color-ocean: lab(36.28 -23.79 -8.98);
  --lab-color-peacock: lab(16.07 -11.84 -10.84);
  --lab-color-azure: lab(22.23 37.55 -72.56);
  --lab-color-cerulean: lab(56 -20.12 -34.69);
  --lab-color-lapis: lab(29.38 37.66 -77.36);
  --lab-color-spruce: lab(25.08 -4.54 -10.4);
  --lab-color-stone: lab(48.64 -7.34 -15.27);
  --lab-color-aegean: lab(28.12 -2.6 -28.32);
  --lab-color-berry: lab(14.72 30.12 -50.55);
  --lab-color-denim: lab(11.69 4.1 -21.08);
  --lab-color-admiral: lab(16.54 39.97 -71.05);
  --lab-color-sapphire: lab(67.27 -26.38 -16.23);
  --lab-color-arctic: lab(87.79 -29.22 -17.9);
  
  /* browns */
    
  --lab-color-tan: lab(87.35 -1.83 24.51);
  --lab-color-beige: lab(87.92 -1.37 35.07);
  --lab-color-macaroon: lab(89.24 -1.02 54.38);
  --lab-color-hazelwood: lab(76.49 -0.46 25.12);
  --lab-color-granola: lab(75.78 3.46 50.68);
  --lab-color-oat: lab(81.66 1.1 34.33);
  --lab-color-eggnog: lab(90.79 1.91 37.06);
  --lab-color-fawn: lab(70.63 3.69 48.69);
  --lab-color-sugarcookie: lab(92.59 -4.07 31.23);
  --lab-color-sand: lab(76.47 3.39 47.24);
  --lab-color-sepia: lab(77.14 11.18 37.95);
  --lab-color-latte: lab(80.49 8.32 40.73);
  --lab-color-oyster: lab(85.11 -4.13 28.06);
  --lab-color-biscotti: lab(80.69 2.54 51.47);
  --lab-color-parmesean: lab(92.68 -1.03 44.43);
  --lab-color-hazelnut: lab(68.72 2.19 40.38);
  --lab-color-sandcastle: lab(79.43 2.31 38.06);
  --lab-color-buttermilk: lab(94.5 -1.72 31.41);
  --lab-color-sanddollar: lab(91.1 -4 23.02);
  --lab-color-shortbread: lab(91.98 -1.01 44.49);
  
  /* yellows */
    
  --lab-color-yellow: lab(88.71 0.51 87.36);
  --lab-color-canary: lab(83.27 8.09 83.45);
  --lab-color-gold: lab(75.09 24.55 78.15);
  --lab-color-daffodil: lab(93.81 -4.15 51.07);
  --lab-color-flaxen: lab(75.43 3.54 50.26);
  --lab-color-butter: lab(90.18 -2.41 83.61);
  --lab-color-lemon: lab(96.13 -19.22 70.93);
  --lab-color-mustard: lab(77.65 9.23 72.06);
  --lab-color-corn: lab(82.4 -3.62 81.38);
  --lab-color-medallion: lab(75.32 10.15 76.78);
  --lab-color-dandelion: lab(85.12 6.85 78.74);
  --lab-color-bumblebee: lab(89.95 -3.56 87.58);
  --lab-color-banana: lab(95.47 -5.75 40.09);
  --lab-color-butterscotch: lab(80.6 13.53 81.45);
  --lab-color-dijon: lab(63.84 11.14 67.63);
  --lab-color-honey: lab(70.08 26.67 73.56);
  --lab-color-blonde: lab(92.79 -4.3 58.58);
  --lab-color-pineapple: lab(90.52 -2.46 83.71);
  --lab-color-tuscansun: lab(85.76 4.97 79.19);
  
  /* oranges */
  
  --lab-color-orange: lab(68.85 43.33 70.71);
  --lab-color-tangerine: lab(67.43 42.63 65.29);
  --lab-color-merigold: lab(77.44 22.44 76.02);
  --lab-color-cider: lab(52.35 28.5 48.46);
  --lab-color-rust: lab(36.97 30.89 45.82);
  --lab-color-ginger: lab(49.53 38.95 58.26);
  --lab-color-tiger: lab(63.35 53.51 71.95);
  --lab-color-bronze: lab(47.75 35.52 54.17);
  --lab-color-cantaloupe: lab(74.97 31.36 39.11);
  --lab-color-apricot: lab(65.44 38.07 69.68);
  --lab-color-carrot: lab(62.28 45.78 66.19);
  --lab-color-squash: lab(52.6 41.7 59.94);
  --lab-color-spice: lab(32.63 26.3 42.17);
  --lab-color-marmalade: lab(54.82 42.38 63.36);
  --lab-color-amber: lab(33.68 36.48 45.24);
  --lab-color-sandstone: lab(58.76 36.7 55.71);
  --lab-color-yam: lab(52.32 44.66 61.81);
  
  /* reds */
    
  --lab-color-red: lab(58.29 70.96 52.01);
  --lab-color-cherry: lab(33 53.36 46.7);
  --lab-color-rose: lab(49.96 69.63 48.28);
  --lab-color-jam: lab(19.9 35.74 25.86);
  --lab-color-merlot: lab(20.13 24.96 15.76);
  --lab-color-garnet: lab(19.1 36.67 27.74);
  --lab-color-crimson: lab(39.67 61.54 51.07);
  --lab-color-ruby: lab(30.2 52.08 43.24);
  --lab-color-scarlet: lab(30.89 51.2 41.8);
  --lab-color-redwine: lab(14.35 30.96 20.35);
  --lab-color-redapple: lab(37.18 55.35 46.59);
  --lab-color-mahogany: lab(12.72 25.53 16.05);
  --lab-color-blood: lab(23.49 41.88 33.85);
  --lab-color-sangria: lab(21.15 31.92 22.26);
  --lab-color-currant: lab(21.19 38.79 29.42);
  --lab-color-blush: lab(49.29 41.88 27.08);
  --lab-color-candy: lab(45.74 67.84 59.75);
  --lab-color-lipstick: lab(33.22 53.65 46.96);
  
  /* pinks */
    
  --lab-color-pink: lab(74.43 40.31 -11.07);
  --lab-color-fuchsia: lab(55.01 83.45 -32.07);
  --lab-color-punch: lab(58.92 63.9 14.71);
  --lab-color-watermelon: lab(69.14 50.88 8.61);
  --lab-color-flamingo: lab(76.9 35.66 4.12);
  --lab-color-rouge: lab(63.42 54.6 9.35);
  --lab-color-salmon: lab(77.96 29.94 19.14);
  --lab-color-coral: lab(67.71 48.92 36.14);
  --lab-color-peach: lab(72.27 38.44 26.62);
  --lab-color-strawberry: lab(59.25 67.22 39.84);
  --lab-color-rosewood: lab(41.31 39.83 20.73);
  --lab-color-lemonade: lab(81.89 25.59 0.96);
  --lab-color-taffy: lab(70.48 50.81 -11.88);
  --lab-color-bubblegum: lab(63.26 66.79 -6.68);
  --lab-color-balletslipper: lab(74.08 38.79 -3.9);
  --lab-color-crepe: lab(80.15 23.25 0.99);
  --lab-color-maroon: lab(29.78 48.82 -1.76);
  --lab-color-hotpink: lab(56.76 83.41 -5.68);
  
  /* purples */
  
  --lab-color-purple: lab(43.67 72.64 -57.27);
  --lab-color-mauve: lab(39.17 29.34 -27.04);
  --lab-color-violet: lab(28.02 55.56 -50.99);
  --lab-color-boysenberry: lab(20.47 41.22 -2.04);
  --lab-color-lavender: lab(74.75 36.22 -33.13);
  --lab-color-plum: lab(22.18 33.84 0.34);
  --lab-color-lilac: lab(54.36 48.37 -42.53);
  --lab-color-periwinkle: lab(66.8 25.44 -27.13); 
  --lab-color-eggplant: lab(11.76 18.8 -12.81);
  --lab-color-iris: lab(51.72 34.39 -42.42);
  --lab-color-heather: lab(56.77 21.34 -27.71);
  --lab-color-amethyst: lab(52.74 48.08 -58.26);
  --lab-color-raisin: lab(6.66 17.76 -0.41);
  --lab-color-orchid: lab(56.93 46.9 -57.08);
  --lab-color-mulberry: lab(14.3 34.41 4.24);
  
  /* greens */
    
  --lab-color-green: lab(72.37 -61.3 54.85);
  --lab-color-chartreuse: lab(91.83 -44.34 77.99);
  --lab-color-juniper: lab(32.14 -18.63 32.89);
  --lab-color-sage: lab(55.48 -14.84 15.59);
  --lab-color-lime: lab(88.29 -74.03 52.51);
  --lab-color-fern: lab(68.94 -43.24 35.37);
  --lab-color-olive: lab(72.96 -24.83 41.11);
  --lab-color-emerald: lab(49.48 -49.27 47.92);
  --lab-color-pear: lab(67.71 -37.77 57.9);
  --lab-color-moss: lab(41.91 -24.32 37.51);
  --lab-color-shamrock: lab(61.34 -58.47 57.66);
  --lab-color-seafoam: lab(83.44 -59.98 28.71);
  --lab-color-pine: lab(29.97 -24.41 24.1);
  --lab-color-parakeet: lab(68.18 -60.56 46.13);
  --lab-color-mint: lab(87.21 -33.21 11.5);
  --lab-color-seaweed: lab(29.23 -15.21 21.91);
  --lab-color-pickle: lab(48.51 -22.45 33.9);
  --lab-color-pistachio: lab(81.75 -14.01 5.1);
  --lab-color-basil: lab(37.16 -25.96 24.64);
  --lab-color-crocodile: lab(48.58 -19.63 32.07);
  
  /* browns */
    
  --lab-color-brown: lab(9.18 5.3 10.12);
  --lab-color-coffee: lab(24.87 6.54 20.36);
  --lab-color-mocha: lab(18.45 6.67 21.13);
  --lab-color-peanut: lab(41.43 8.52 27.6);
  --lab-color-carob: lab(16.56 4.99 17.62);
  --lab-color-hickory: lab(14.19 11.98 14.22);
  --lab-color-pecan: lab(19.58 16.55 20.43);
  --lab-color-walnut: lab(18.96 11.8 19.94);
  --lab-color-caramel: lab(28.46 19.72 32.56);
  --lab-color-gingerbread: lab(24.48 20.99 33.07);
  --lab-color-chocolate: lab(10.12 10 14.08);
  --lab-color-tortilla: lab(53.88 8.14 28.77);
  --lab-color-umber: lab(16.02 6.75 13.34);
  --lab-color-tawny: lab(36.92 20.42 35.2);
  --lab-color-brunette: lab(14.7 11.9 19.03);
  --lab-color-cinammon: lab(25.54 24.91 30.83);
  --lab-color-penny: lab(21.99 18.12 21.67);
  
  /* greys */
    
  --lab-color-grey: lab(69.61 0 0);
  --lab-color-shadow: lab(23.07 0 0);
  --lab-color-graphite: lab(34.24 6.91 -6.49);
  --lab-color-iron: lab(19.24 3.47 -1.54);
  --lab-color-pewter: lab(44.86 4.82 -13.1);
  --lab-color-cloud: lab(79.77 1.55 -5.52);
  --lab-color-silver: lab(88.12 0 0);
  --lab-color-smoke: lab(35.63 5.64 -6.94);
  --lab-color-anchor: lab(28.26 1.77 -6.07);
  --lab-color-ash: lab(33.25 4.02 0.84);
  --lab-color-porpoise: lab(32.88 3.23 -9.29);
  --lab-color-dove: lab(48.2 8.15 -7.33);
  --lab-color-fog: lab(39.32 6.83 -5.04);
  --lab-color-flint: lab(52.98 5.69 -17.14);
  --lab-color-pebble: lab(21.2 0 0);
  --lab-color-lead: lab(27.2 3.17 -9);
  --lab-color-coin: lab(62.99 3.1 -9.32);
  --lab-color-fossil: lab(48.69 2.98 -1.35);
    
  /* blacks */
    
  --lab-color-black: lab(5.06 0 0);
  --lab-color-ebony: lab(1.29 0.77 1.53);
  --lab-color-crow: lab(13.48 0.96 2.57);
  --lab-color-charcoal: lab(12.57 1.53 -1.68);
}

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

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

/* Colors taken from The New Defaults */
  /* whites */
  .white {background-color: var(--lab-color-white);}
  .pearl {background-color: var(--lab-color-pearl);}
  .alabaster {background-color: var(--lab-color-alabaster);}
  .snow {background-color: var(--lab-color-snow);}
  .ivory {background-color: var(--lab-color-ivory);}
  .cream {background-color: var(--lab-color-cream);}
  .eggshell {background-color: var(--lab-color-eggshell);}
  .cotton {background-color: var(--lab-color-cotton);}
  .chiffon {background-color: var(--lab-color-chiffon);}
  .salt {background-color: var(--lab-color-salt);}
  .lace {background-color: var(--lab-color-lace);}
  .coconut {background-color: var(--lab-color-coconut);}
  .linen {background-color: var(--lab-color-linen);}
  .bone {background-color: var(--lab-color-bone);}
  .porcelain {background-color: var(--lab-color-porcelain);}
  .parchment {background-color: var(--lab-color-parchment);}
  .rice {background-color: var(--lab-color-rice);}
      
    /* blues */
      
  .blue {color: white; background-color: var(--lab-color-blue);}
  .navy {color: white; background-color: var(--lab-color-navy);}
  .aqua {color: white; background-color: var(--lab-color-aqua);}
  .sky {color: white; background-color: var(--lab-color-sky);}
  .teal {color: white; background-color: var(--lab-color-teal);}
  .slate {color: white; background-color: var(--lab-color-slate);}
  .indigo {color: white; background-color: var(--lab-color-indigo);}
  .cobalt {color: white; background-color: var(--lab-color-cobalt);}
  .ocean {color: white; background-color: var(--lab-color-ocean);}
  .peacock {color: white; background-color: var(--lab-color-peacock);}
  .azure {color: white; background-color: var(--lab-color-azure);}
  .cerulean {color: white; background-color: var(--lab-color-cerulean);}
  .lapis {color: white; background-color: var(--lab-color-lapis);}
  .spruce {color: white; background-color: var(--lab-color-spruce);}
  .stone {color: white; background-color: var(--lab-color-stone);}
  .aegean {color: white; background-color: var(--lab-color-aegean);}
  .berry {color: white; background-color: var(--lab-color-berry);}
  .denim {color: white; background-color: var(--lab-color-denim);}
  .admiral {color: white; background-color: var(--lab-color-admiral);}
  .sapphire {color: white; background-color: var(--lab-color-sapphire);}
  .arctic {color: white; background-color: var(--lab-color-arctic);}
    
    /* browns */
      
  .tan {background-color: var(--lab-color-tan);}
  .beige {background-color: var(--lab-color-beige);}
  .macaroon {background-color: var(--lab-color-macaroon);}
  .hazelwood {background-color: var(--lab-color-hazelwood);}
  .granola {background-color: var(--lab-color-granola);}
  .oat {background-color: var(--lab-color-oat);}
  .eggnog {background-color: var(--lab-color-eggnog);}
  .fawn {background-color: var(--lab-color-fawn);}
  .sugarcookie {background-color: var(--lab-color-sugarcookie);}
  .sand {background-color: var(--lab-color-sand);}
  .sepia {background-color: var(--lab-color-sepia);}
  .latte {background-color: var(--lab-color-latte);}
  .oyster {background-color: var(--lab-color-oyster);}
  .biscotti {background-color: var(--lab-color-biscotti);}
  .parmesean {background-color: var(--lab-color-parmesean);}
  .hazelnut {background-color: var(--lab-color-hazelnut);}
  .sandcastle {background-color: var(--lab-color-sandcastle);}
  .buttermilk {background-color: var(--lab-color-buttermilk);}
  .sanddollar {background-color: var(--lab-color-sanddollar);}
  .shortbread {background-color: var(--lab-color-shortbread);}
    
    /* yellows */
      
  .yellow {background-color: var(--lab-color-yellow);}
  .canary {background-color: var(--lab-color-canary);}
  .gold {background-color: var(--lab-color-gold);}
  .daffodil {background-color: var(--lab-color-daffodil);}
  .flaxen {background-color: var(--lab-color-flaxen);}
  .butter {background-color: var(--lab-color-butter);}
  .lemon {background-color: var(--lab-color-lemon);}
  .mustard {background-color: var(--lab-color-mustard);}
  .corn {background-color: var(--lab-color-corn);}
  .medallion {background-color: var(--lab-color-medallion);}
  .dandelion {background-color: var(--lab-color-dandelion);}
  .bumblebee {background-color: var(--lab-color-bumblebee);}
  .banana {background-color: var(--lab-color-banana);}
  .butterscotch {background-color: var(--lab-color-butterscotch);}
  .dijon {background-color: var(--lab-color-dijon);}
  .honey {background-color: var(--lab-color-honey);}
  .blonde {background-color: var(--lab-color-blonde);}
  .pineapple {background-color: var(--lab-color-pineapple);}
  .tuscansun {background-color: var(--lab-color-tuscansun);}
    
    /* oranges */
    
  .orange {background-color: var(--lab-color-orange);}
  .tangerine {background-color: var(--lab-color-tangerine);}
  .merigold {background-color: var(--lab-color-merigold);}
  .cider {background-color: var(--lab-color-cider);}
  .rust {background-color: var(--lab-color-rust);}
  .ginger {background-color: var(--lab-color-ginger);}
  .tiger {background-color: var(--lab-color-tiger);}
  .bronze {background-color: var(--lab-color-bronze);}
  .cantaloupe {background-color: var(--lab-color-cantaloupe);}
  .apricot {background-color: var(--lab-color-apricot);}
  .carrot {background-color: var(--lab-color-carrot);}
  .squash {background-color: var(--lab-color-squash);}
  .spice {background-color: var(--lab-color-spice);}
  .marmalade {background-color: var(--lab-color-marmalade);}
  .amber {background-color: var(--lab-color-amber);}
  .sandstone {background-color: var(--lab-color-sandstone);}
  .yam {background-color: var(--lab-color-yam);}
    
    /* reds */
      
  .red {color: white;background-color: var(--lab-color-red);}
  .cherry {color: white;background-color: var(--lab-color-cherry);}
  .rose {color: white;background-color: var(--lab-color-rose);}
  .jam {color: white;background-color: var(--lab-color-jam);}
  .merlot {color: white;background-color: var(--lab-color-merlot);}
  .garnet {color: white;background-color: var(--lab-color-garnet);}
  .crimson {color: white;background-color: var(--lab-color-crimson);}
  .ruby {color: white;background-color: var(--lab-color-ruby);}
  .scarlet {color: white;background-color: var(--lab-color-scarlet);}
  .redwine {color: white;background-color: var(--lab-color-redwine);}
  .redapple {color: white;background-color: var(--lab-color-redapple);}
  .mahogany {color: white;background-color: var(--lab-color-mahogany);}
  .blood {color: white;background-color: var(--lab-color-blood);}
  .sangria {color: white;background-color: var(--lab-color-sangria);}
  .currant {color: white;background-color: var(--lab-color-currant);}
  .blush {color: white;background-color: var(--lab-color-blush);}
  .candy {color: white;background-color: var(--lab-color-candy);}
  .lipstick {color: white;background-color: var(--lab-color-lipstick);}
    
    /* pinks */
      
  .pink {color: white; background-color: var(--lab-color-pink);}
  .fuchsia {color: white; background-color: var(--lab-color-fuchsia);}
  .punch {color: white; background-color: var(--lab-color-punch);}
  .watermelon {color: white; background-color: var(--lab-color-watermelon);}
  .flamingo {color: white; background-color: var(--lab-color-flamingo);}
  .rouge {color: white; background-color: var(--lab-color-rouge);}
  .salmon {color: white; background-color: var(--lab-color-salmon);}
  .coral {color: white; background-color: var(--lab-color-coral);}
  .peach {color: white; background-color: var(--lab-color-peach);}
  .strawberry {color: white; background-color: var(--lab-color-strawberry);}
  .rosewood {color: white; background-color: var(--lab-color-rosewood);}
  .lemonade {color: white; background-color: var(--lab-color-lemonade);}
  .taffy {color: white; background-color: var(--lab-color-taffy);}
  .bubblegum {color: white; background-color: var(--lab-color-bubblegum);}
  .balletslipper {color: white; background-color: var(--lab-color-balletslipper);}
  .crepe {color: white; background-color: var(--lab-color-crepe);}
  .maroon {color: white; background-color: var(--lab-color-maroon);}
  .hotpink {color: white; background-color: var(--lab-color-hotpink);}
    
    /* purples */
    
  .purple {color: white; background-color: var(--lab-color-purple);}
  .mauve {color: white; background-color: var(--lab-color-mauve);}
  .violet {color: white; background-color: var(--lab-color-violet);}
  .boysenberry {color: white; background-color: var(--lab-color-boysenberry);}
  .lavender {color: white; background-color: var(--lab-color-lavender);}
  .plum {color: white; background-color: var(--lab-color-plum);}
  .lilac {color: white; background-color: var(--lab-color-lilac);}
  .periwinkle {color: white; background-color: var(--lab-color-periwinkle);}
  .eggplant {color: white; background-color: var(--lab-color-eggplant);}
  .iris {color: white; background-color: var(--lab-color-iris);}
  .heather {color: white; background-color: var(--lab-color-heather);}
  .amethyst {color: white; background-color: var(--lab-color-amethyst);}
  .raisin {color: white; background-color: var(--lab-color-raisin);}
  .orchid {color: white; background-color: var(--lab-color-orchid);}
  .mulberry {color: white; background-color: var(--lab-color-mulberry);}
    
    /* greens */
      
  .green {color: white; background-color: var(--lab-color-green);}
  .chartreuse {color: white; background-color: var(--lab-color-chartreuse);}
  .juniper {color: white; background-color: var(--lab-color-juniper);}
  .sage {color: white; background-color: var(--lab-color-sage);}
  .lime {color: white; background-color: var(--lab-color-lime);}
  .fern {color: white; background-color: var(--lab-color-fern);}
  .olive {color: white; background-color: var(--lab-color-olive);}
  .emerald {color: white; background-color: var(--lab-color-emerald);}
  .pear {color: white; background-color: var(--lab-color-pear);}
  .moss {color: white; background-color: var(--lab-color-moss);}
  .shamrock {color: white; background-color: var(--lab-color-shamrock);}
  .seafoam {color: white; background-color: var(--lab-color-seafoam);}
  .pine {color: white; background-color: var(--lab-color-pine);}
  .parakeet {color: white; background-color: var(--lab-color-parakeet);}
  .mint {color: white; background-color: var(--lab-color-mint);}
  .seaweed {color: white; background-color: var(--lab-color-seaweed);}
  .pickle {color: white; background-color: var(--lab-color-pickle);}
  .pistachio {color: white; background-color: var(--lab-color-pistachio);}
  .basil {color: white; background-color: var(--lab-color-basil);}
  .crocodile {color: white; background-color: var(--lab-color-crocodile);}
    
    /* browns */
      
  .brown {color: white; background-color: var(--lab-color-brown);}
  .coffee {color: white; background-color: var(--lab-color-coffee);}
  .mocha {color: white; background-color: var(--lab-color-mocha);}
  .peanut {color: white; background-color: var(--lab-color-peanut);}
  .carob {color: white; background-color: var(--lab-color-carob);}
  .hickory {color: white; background-color: var(--lab-color-hickory);}
  .pecan {color: white; background-color: var(--lab-color-pecan);}
  .walnut {color: white; background-color: var(--lab-color-walnut);}
  .caramel {color: white; background-color: var(--lab-color-caramel);}
  .gingerbread {color: white; background-color: var(--lab-color-gingerbread);}
  .chocolate {color: white; background-color: var(--lab-color-chocolate);}
  .tortilla {color: white; background-color: var(--lab-color-tortilla);}
  .umber {color: white; background-color: var(--lab-color-umber);}
  .tawny {color: white; background-color: var(--lab-color-tawny);}
  .brunette {color: white; background-color: var(--lab-color-brunette);}
  .cinammon {color: white; background-color: var(--lab-color-cinammon);}
  .penny {color: white; background-color: var(--lab-color-penny);}
    
    /* greys */
      
  .grey {color: white; background-color: var(--lab-color-grey);}
  .shadow {color: white; background-color: var(--lab-color-shadow);}
  .graphite {color: white; background-color: var(--lab-color-graphite);}
  .iron {color: white; background-color: var(--lab-color-iron);}
  .pewter {color: white; background-color: var(--lab-color-pewter);}
  .cloud {color: white; background-color: var(--lab-color-cloud);}
  .silver {color: white; background-color: var(--lab-color-silver);}
  .smoke {color: white; background-color: var(--lab-color-smoke);}
  .anchor {color: white; background-color: var(--lab-color-anchor);}
  .ash {color: white; background-color: var(--lab-color-ash);}
  .porpoise {color: white; background-color: var(--lab-color-porpoise);}
  .dove {color: white; background-color: var(--lab-color-dove);}
  .fog {color: white; background-color: var(--lab-color-fog);}
  .flint {color: white; background-color: var(--lab-color-flint);}
  .pebble {color: white; background-color: var(--lab-color-pebble);}
  .lead {color: white; background-color: var(--lab-color-lead);}
  .coin {color: white; background-color: var(--lab-color-coin);}
  .fossil {color: white; background-color: var(--lab-color-fossil);}
      
    /* blacks */
      
  .black {color: white; background-color: var(--lab-color-black);}
  .ebony {color: white; background-color: var(--lab-color-ebony);}
  .crow {color: white; background-color: var(--lab-color-crow);}
  .charcoal {color: white; background-color: var(--lab-color-charcoal);}
  • URL: /components/raw/lab-colors/lab-colors.css
  • Filesystem Path: src/components/01-atoms/03-colors/06-lab-colors/lab-colors.css
  • Size: 23.3 KB
  • Content: 
    :root {
  --lab-color-hemi-orange: lab(64.61 45.11 61.5);
  --lab-color-plum-crazy: lab(30.92 63.24 -80.42);
  --lab-color-cherry: lab(45.06 69.97 40.66);
  --lab-color-black-cherry: lab(21.8 23.48 -3.35);
  --lab-color-panther-pink: lab(48.91 56.87 -23.01);
  --lab-color-green-go: lab(56.42 -43.85 32.19);
  --lab-color-sublime-green: lab(82.65 -38.43 68.71);
  --lab-color-go-mango: lab(54.05 53.7 36.51);
  --lab-color-butterscotch: lab(63.69 24.63 60.14);
  --lab-color-bright-green: lab(89.23 -67.72 82.79);
  --lab-color-top-banana: lab(93.19 -6.22 75.18);
  --lab-color-citron-yella: lab(66.7 -15.45 62.43);
  --lab-color-rebeccapurple: lab(32.39 38.42 -47.69);
}

.hemi-orange {  background-color: var(--lab-color-hemi-orange); color: white; }
.plum-crazy {  background-color: var(--lab-color-plum-crazy); color: white; }
.cherry {  background-color: var(--lab-color-cherry:); color: white; }
.black-cherry {  background-color: var(--lab-color-black-cherry); color: white; }
.panther-pink {  background-color: var(--lab-color-panther-pink); color: white; }
.green-go {  background-color: var(--lab-color-green-go); color: white; }
.sublime-green {  background-color: var(--lab-color-sublime-green); color: white; }
.go-mango {  background-color: var(--lab-color-go-mango); color: white; }
.butterscotch: {  background-color: var(--lab-color-butterscotch); color: white; }
.bright-green {  background-color: var(--lab-color-bright-green); color: white; }
.top-banana {  background-color: var(--lab-color-top-banana); color: white; }
.citron-yella {  background-color: var(--lab-color-citron-yella); color: white; }
.panther-pink {  background-color: var(--lab-color-panther-pink); color: white; }
.rebeccapurple {  background-color: var(--lab-color-rebeccapurple); color: white; }
  • URL: /components/raw/lab-colors/lab-funk.css
  • Filesystem Path: src/components/01-atoms/03-colors/06-lab-colors/lab-funk.css
  • Size: 1.8 KB

Color experiment in LAB color space

Used Evil Martian’s LCH Color Picker & Converter

Note that while this is marked as done you should be careful using it since LAB colors may not have wide support.

Currently Fractal is not importing the LAB colors like it does LCH and sRGB. Still exploring why.