rivendellweb pattern library

Colors: Blues 

<h3>blues</h3>
<div class="color-container">
    <div class="color-item blue">blue<br /><strong>#0074d9</strong></div>
    <div class="color-item navy">navy<br /><strong>#001f3f</strong></div>
    <div class="color-item aqua">aqua<br /><strong>#7fdbff</strong></div>
    <div class="color-item sky">sky<br /><strong>#00b2ff</strong></div>
    <div class="color-item teal">teal<br /><strong>#39cccc</strong></div>
    <div class="color-item slate">slate<br /><strong>#757b87</strong></div>
    <div class="color-item indigo">indigo<br /><strong>#281e5d</strong></div>
    <div class="color-item cobalt">cobalt<br /><strong>#1438bd</strong></div>
    <div class="color-item ocean">ocean<br /><strong>#026063</strong></div>
    <div class="color-item peacock">peacock<br /><strong>#002d37</strong></div>
    <div class="color-item azure">azure<br /><strong>#1621a6</strong></div>
    <div class="color-item cerulean">cerulean<br /><strong>#0592c2</strong></div>
    <div class="color-item lapis">lapis<br /><strong>#2632c2</strong></div>
    <div class="color-item spruce">spruce<br /><strong>#2c3e4b</strong></div>
    <div class="color-item stone">stone<br /><strong>#59788d</strong></div>
    <div class="color-item aegean">aegean<br /><strong>#1e456e</strong></div>
    <div class="color-item berry">berry<br /><strong>#24146f</strong></div>
    <div class="color-item denim">denim<br /><strong>#141e3c</strong></div>
    <div class="color-item admiral">admiral<br /><strong>#061094</strong></div>
    <div class="color-item sapphire">sapphire<br /><strong>#52b2c0</strong></div>
    <div class="color-item arctic">arctic<br /><strong>#82edfd</strong></div>
</div>
 
<h3>blues</h3>
<div class="color-container">
  <div class="color-item blue">blue<br/><strong>#0074d9</strong></div>
  <div class="color-item navy">navy<br/><strong>#001f3f</strong></div>
  <div class="color-item aqua">aqua<br/><strong>#7fdbff</strong></div>
  <div class="color-item sky">sky<br/><strong>#00b2ff</strong></div>
  <div class="color-item teal">teal<br/><strong>#39cccc</strong></div>
  <div class="color-item slate">slate<br/><strong>#757b87</strong></div>
  <div class="color-item indigo">indigo<br/><strong>#281e5d</strong></div>
  <div class="color-item cobalt">cobalt<br/><strong>#1438bd</strong></div>
  <div class="color-item ocean">ocean<br/><strong>#026063</strong></div>
  <div class="color-item peacock">peacock<br/><strong>#002d37</strong></div>
  <div class="color-item azure">azure<br/><strong>#1621a6</strong></div>
  <div class="color-item cerulean">cerulean<br/><strong>#0592c2</strong></div>
  <div class="color-item lapis">lapis<br/><strong>#2632c2</strong></div>
  <div class="color-item spruce">spruce<br/><strong>#2c3e4b</strong></div>
  <div class="color-item stone">stone<br/><strong>#59788d</strong></div>
  <div class="color-item aegean">aegean<br/><strong>#1e456e</strong></div>
  <div class="color-item berry">berry<br/><strong>#24146f</strong></div>
  <div class="color-item denim">denim<br/><strong>#141e3c</strong></div>
  <div class="color-item admiral">admiral<br/><strong>#061094</strong></div>
  <div class="color-item sapphire">sapphire<br/><strong>#52b2c0</strong></div>
  <div class="color-item arctic">arctic<br/><strong>#82edfd</strong></div>
</div>
 
/* No context defined. */
  • Content: 
    /* color-mix() experiment: lighten a charcoal black */

:root {
  /* lightening charcoal */
  --text1: color-mix(in srgb, var(--color-charcoal) 10%, white);
  --text2: color-mix(in srgb, var(--color-charcoal) 20%, white);
  --text3: color-mix(in srgb, var(--color-charcoal) 30%, white);
  --text4: color-mix(in srgb, var(--color-charcoal) 40%, white);
  --text5: color-mix(in srgb, var(--color-charcoal) 50%, white);
  --text6: color-mix(in srgb, var(--color-charcoal) 60%, white);
  --text7: color-mix(in srgb, var(--color-charcoal) 70%, white);
  --text8: color-mix(in srgb, var(--color-charcoal) 80%, white);
  --text9: color-mix(in srgb, var(--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/colors/color-mix01.css
  • Filesystem Path: src/components/01-atoms/03-colors/04-colors/color-mix01.css
  • Size: 1.2 KB
  • Content: 
    /* color-mix() experiment: darken a dark green mint color  */

:root {
  --dark-text1: color-mix(in srgb, var(--color-mint) 10%, black);
  --dark-text2: color-mix(in srgb, var(--color-mint) 20%, black);
  --dark-text3: color-mix(in srgb, var(--color-mint) 30%, black);
  --dark-text4: color-mix(in srgb, var(--color-mint) 40%, black);
  --dark-text5: color-mix(in srgb, var(--color-mint) 50%, black);
  --dark-text6: color-mix(in srgb, var(--color-mint) 60%, black);
  --dark-text7: color-mix(in srgb, var(--color-mint) 70%, black);
  --dark-text8: color-mix(in srgb, var(--color-mint) 80%, black);
  --dark-text9: color-mix(in srgb, var(--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/colors/color-mix02.css
  • Filesystem Path: src/components/01-atoms/03-colors/04-colors/color-mix02.css
  • Size: 1.3 KB
  • Content: 
    :root {

  /* whites */
  --color-white: #fffeff;
  --color-alabaster: #fefaf0;
  --color-snow: #f4fefd;
  --color-ivory: #fef7e5;
  --color-cream: #fffbda;
  --color-eggshell: #fef9e3;
  --color-cotton: #fbfcf7;
  --color-chiffon: #fafaf1;
  --color-salt: #f8efec;
  --color-lace: #faf3ea;
  --color-coconut: #fff1e6;
  --color-linen: #f2ebd3;
  --color-bone: #e7dfcc;
  --color-porcelain: #fffffc;
  --color-parchment: #fcf6df;
  --color-rice: #fbf6ef;
    
  /* blues */
    
  --color-blue: #0074d9;
  --color-navy: #001f3f;
  --color-aqua: #7fdbff;
  --color-sky: #00b2ff;
  --color-teal: #39cccc;
  --color-slate: #757b87;
  --color-indigo: #281e5d;
  --color-cobalt: #1438bd;
  --color-ocean: #026063;
  --color-peacock: #002d37;
  --color-azure: #1621a6;
  --color-cerulean: #0592c2;
  --color-lapis: #2632c2;
  --color-spruce: #2c3e4b;
  --color-stone: #59788d;
  --color-aegean: #1e456e;
  --color-berry: #24146f;
  --color-denim: #141e3c;
  --color-admiral: #061094;
  --color-sapphire: #52b2c0;
  --color-arctic: #82edfd;
  
  /* browns */
    
  --color-tan: #e5dbac;
  --color-beige: #ecdc99;
  --color-macaroon: #f7df75;
  --color-hazelwood: #c9bc8e;
  --color-granola: #d6b75a;
  --color-oat: #dec98a;
  --color-eggnog: #fbe29d;
  --color-fawn: #c7a951;
  --color-sugarcookie: #f3ebad;
  --color-sand: #d7b963;
  --color-sepia: #e3b678;
  --color-latte: #e9c17b;
  --color-oyster: #dcd69f;
  --color-biscotti: #e3c565;
  --color-parmesean: #fee993;
  --color-hazelnut: #bda55d;
  --color-sandcastle: #dbc27d;
  --color-buttermilk: #fdefb2;
  --color-sanddollar: #ebe7b9;
  --color-shortbread: #fce791;
  
  /* yellows */
    
  --color-yellow: #ffdc00;
  --color-canary: #fac801;
  --color-gold: #f9a602;
  --color-daffodil: #feee88;
  --color-flaxen: #d5b65a;
  --color-butter: #fee226;
  --color-lemon: #effd5f;
  --color-mustard: #e9b829;
  --color-corn: #e4cd04;
  --color-medallion: #e4b103;
  --color-dandelion: #fdce2a;
  --color-bumblebee: #fce206;
  --color-banana: #fcf4a3;
  --color-butterscotch: #fabd04;
  --color-dijon: #c29200;
  --color-honey: #ec9707;
  --color-blonde: #fdeb75;
  --color-pineapple: #ffe327;
  --color-tuscansun: #fcd12a;
  
  /* oranges */
  
  --color-orange: #ff851b;
  --color-tangerine: #f98228;
  --color-merigold: #fdae1d;
  --color-cider: #b66827;
  --color-rust: #8c4005;
  --color-ginger: #bc5703;
  --color-tiger: #fb6b02;
  --color-bronze: #b2560c;
  --color-cantaloupe: #fca172;
  --color-apricot: #ed810f;
  --color-carrot: #ed7116;
  --color-squash: #c95c09;
  --color-spice: #7a3a03;
  --color-marmalade: #d16102;
  --color-amber: #893201;
  --color-sandstone: #d57128;
  --color-yam: #cc5801;
  
  /* reds */
    
  --color-red: #ff4136;
  --color-cherry: #9a0f02;
  --color-rose: #e2252a;
  --color-jam: #600f0b;
  --color-merlot: #541f1b;
  --color-garnet: #5f0a04;
  --color-crimson: #b8100a;
  --color-ruby: #900503;
  --color-scarlet: #910d08;
  --color-redwine: #4c0805;
  --color-redapple: #a91b0d;
  --color-mahogany: #420d09;
  --color-blood: #710c04;
  --color-sangria: #5f1914;
  --color-currant: #670c07;
  --color-blush: #bb544a;
  --color-candy: #d31603;
  --color-lipstick: #9b0f02;
  
  /* pinks */
    
  --color-pink: #f69acd;
  --color-fuchsia: #f012be;
  --color-punch: #f25278;
  --color-watermelon: #fe809c;
  --color-flamingo: #fda4b8;
  --color-rouge: #f26c8c;
  --color-salmon: #fdab9f;
  --color-coral: #fe7d67;
  --color-peach: #fb9483;
  --color-strawberry: #fc4c4e;
  --color-rosewood: #a04242;
  --color-lemonade: #fabacb;
  --color-taffy: #fa85c4;
  --color-bubblegum: #fd5ca8;
  --color-balletslipper: #f69abf;
  --color-crepe: #f1b7c6;
  --color-maroon: #85144b;
  --color-hotpink: #ff1696;
  
  /* purples */
  
  --color-purple: #b10dc9;
  --color-mauve: #7a4a89;
  --color-violet: #710193;
  --color-boysenberry: #630536;
  --color-lavender: #e3a0f6;
  --color-plum: #601a36;
  --color-lilac: #b65fcd;
  --color-periwinkle: #be93d4; 
  --color-eggplant: #311431;
  --color-iris: #9866c5;
  --color-heather: #9b7cb9;
  --color-amethyst: #a45de4;
  --color-raisin: #290916;
  --color-orchid: #af69ee;
  --color-mulberry: #4d0220;
  
  /* greens */
    
  --color-green: #2ecc40;
  --color-chartreuse: #b0fd38;
  --color-juniper: #395311;
  --color-sage: #728c69;
  --color-lime: #01ff70;
  --color-fern: #5dbc64;
  --color-olive: #98bf64;
  --color-emerald: #038911;
  --color-pear: #74b62d;
  --color-moss: #476d1e;
  --color-shamrock: #03ac13;
  --color-seafoam: #3cec96;
  --color-pine: #24501e;
  --color-parakeet: #02c04a;
  --color-mint: #98ecc3;
  --color-seaweed: #354b21;
  --color-pickle: #5a7d36;
  --color-pistachio: #b2d3c1;
  --color-basil: #32622d;
  --color-crocodile: #5f7c3a;
  
  /* browns */
    
  --color-brown: #241709;
  --color-coffee: #4b371c;
  --color-mocha: #3c290d;
  --color-peanut: #795c34;
  --color-carob: #35260f;
  --color-hickory: #371d10;
  --color-pecan: #4a2512;
  --color-walnut: #432711;
  --color-caramel: #66360f;
  --color-gingerbread: #5d2c04;
  --color-chocolate: #2c1603;
  --color-tortilla: #9a7b4f;
  --color-umber: #352415;
  --color-tawny: #7e491d;
  --color-brunette: #391e07;
  --color-cinammon: #642b0d;
  --color-penny: #522915;
  
  /* greys */
    
  --color-grey: #aaaaaa;
  --color-shadow: #373737;
  --color-graphite: #584d5b;
  --color-iron: #332d31;
  --color-pewter: #6a6880;
  --color-cloud: #c5c5d0;
  --color-silver: #dddddd;
  --color-smoke: #59515f;
  --color-anchor: #42424c;
  --color-ash: #554c4d;
  --color-porpoise: #4d4c5c;
  --color-dove: #7c6e7f;
  --color-fog: #655965;
  --color-flint: #7d7c9c;
  --color-pebble: #333333;
  --color-lead: #403f4e;
  --color-coin: #9897a9;
  --color-fossil: #787276;
    
  /* blacks */
    
  --color-black: #111111;
  --color-ebony: #080401;
  --color-crow: #25221F;
  --color-charcoal: #222023;
}

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

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

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

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

Colors

I’m still looking for one or two color palletes that I like. In the meantime I’ll just use this component to park drafts, in addition to what I already use for the blog and other projects.

The New Defaults

A replacement for the standard CSS named color system. Provides more visually appealing hues for many CSS keywords; adds new colors with more relevant and easily remembered names. Inspired by Ingrid Sundberg’s color thesaurus and the work of Adam Morse. The original From Dudley Storey, is available from Github