Pulumi Design: Colors

index.html

<div class="p-8 leading-relaxed bg-white flex items-start">
  <div class="w-1/4">
    <h1 class="text-xl text-gray-800 font-bold">Brand Base Colors</h1>
    <ul class="flex flex-col">
      <li class="bg-blue-500 text-blue-100 shadow-md whitespace-pre text-xs leading-relaxed text-xs h-32 w-32 p-2 mr-4 my-2"></li>
      <li class="bg-orange-500 text-orange-100 shadow-md whitespace-pre text-xs leading-relaxed text-xs h-32 w-32 p-2 mr-4 my-2"></li>
      <li class="bg-green-500 text-green-100 shadow-md whitespace-pre text-xs leading-relaxed text-xs h-32 w-32 p-2 mr-4 my-2"></li>
      <li class="bg-purple-500 text-purple-100 shadow-md whitespace-pre text-xs leading-relaxed text-xs h-32 w-32 p-2 mr-4 my-2"></li>
    </ul>
  </div>
  <div class="w-3/4">
    <h1 class="text-xl text-gray-800 font-bold">Tints and Shades</h1>
    <p class="text-gray-700">
      For use in websites, applications, docs, slides, etc.     </p>

    <div class="hues flex flex-col my-8"></div>
  </div>
</div>

pulumi-design-colors.markdown

Pulumi Design: Colors

A Pen by Christian Nunciato on CodePen.

License.

script.typescript

["gray", "red", "yellow", "blue", "orange", "green", "purple"].map(hue => {
  let item = $(`<ul class="flex flex-wrap"></ul>`);
  let tints = [];
  
  for (let i = 1; i <= 9; i++) {
    const tint = i * 100;
    const el = $(`
      <li class="bg-${hue}-${tint} text-${hue}-${i > 3 ? "100" : "900"} 
        shadow-md whitespace-pre text-xs leading-relaxed text-xs h-32 w-32 p-2 mr-4 my-2">
      </li>
    `);
    item.append(el);
  }
  
  $(".hues").append(item);
  $("li").each((i, el) => {
    const props = {};
    const pairs = getComputedStyle(el, ':after')
      .content
      .replace(/"/g, "").split(" ");
    
    pairs.map(pair => {
      [k, v] = pair.split(":");
      props[k] = v;
    });
    
    el.textContent = `${props["hex"].toUpperCase()}
rgb(${props["r"]}, ${props["g"]}, ${props["b"]})
hsl(${parseInt(props["h"])}, ${parseInt(props["s"])}, ${parseInt(props["l"])})`;
  });
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

style.scss

$hues: (
    gray: (
        100: #f7fafc,
        200: #edf2f7,
        300: #e2e8f0,
        400: #cbd5e0,
        500: #a0aec0,
        600: #718096,
        700: #4a5568,
        800: #2d3748,
        900: #1a202c,
    ),
    red: (
        100: #fff5f5,
        200: #fed7d7,
        300: #feb2b2,
        400: #fc8181,
        500: #f56565,
        600: #e53e3e,
        700: #c53030,
        800: #9b2c2c,
        900: #742a2a,
    ),
    yellow: (
        100: #fffff0,
        200: #fefcbf,
        300: #faf089,
        400: #f6e05e,
        500: #ecc94b,
        600: #d69e2e,
        700: #b7791f,
        800: #975a16,
        900: #744210,
    ),
    purple: (
        100: #d7cddc,
        200: #a48bb3,
        300: #745687,
        400: #654276,
        500: #512668,
        600: #421d57,
        700: #371a47,
        800: #2a1337,
        900: #180b1f,
    ),
    blue: (
        100: #f5fbff,
        200: #cae6f7,
        300: #9dd1f0,
        400: #73b7e7,
        500: #52a6da,
        600: #4387c7,
        700: #3671b0,
        800: #365881,
        900: #334866,
    ),
    orange: (
        100: #fff7eb,
        200: #fde6c4,
        300: #fad49e,
        400: #f6ba7e,
        500: #ee975c,
        600: #e17d47,
        700: #d86131,
        800: #ba4a2c,
        900: #993d29,
    ),
    green: (
        100: #e0fff2,
        200: #b2fbe0,
        300: #81eeca,
        400: #4ce1b4,
        500: #2fc89f,
        600: #25a78b,
        700: #1d8673,
        800: #19675b,
        900: #155148,
    ),
);

@each $hue, $variants in $hues {
  @each $variant, $hex in $variants {
    .bg-#{$hue}-#{$variant} {
      background-color: $hex;
      
      &:after {
        content: "name:#{$hue}-#{$variant} hex:#{$hex} r:#{red($hex)} g:#{green($hex)} b:#{blue($hex)} h:#{hue($hue)} s:#{saturation($hue)} l:#{lightness($hue)}";
        opacity: 0;
      }
    }
  }
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.0.4/tailwind.min.css" rel="stylesheet" />