Juli Living Showcase

Colour

Primitive OKLCH scales, hand-tuned from the four brand hexes. Mode-agnostic — they do not change between light and dark (ADR 0003); only the semantic mappings do. Parsed out of primitives.css at build time, so this page cannot drift from the tokens.

The sRGB values beside each swatch are gamut-mapped the way a browser maps them on an sRGB display, so the string and the painted chip agree. On a wide-gamut display the chip is the more saturated of the two.

teal

  1. 50oklch(0.99 0.01 195)#f5fefergb(245, 254, 254)
  2. 100oklch(0.97 0.05 195)#cfffffrgb(207, 255, 255)
  3. 200oklch(0.96 0.08 195)#b1ffffrgb(177, 255, 255)
  4. 300oklch(0.93 0.13 195)#68ffffrgb(104, 255, 255)
  5. 400oklch(0.85 0.19 195)#00f2f4rgb(0, 242, 244)
  6. 500oklch(0.68 0.15 195)#00b3b5rgb(0, 179, 181)
  7. 600oklch(0.55 0.13 195)#008889rgb(0, 136, 137)
  8. 700oklch(0.38 0.09 195)#005051rgb(0, 80, 81)
  9. 800oklch(0.27 0.06 195)#002f2frgb(0, 47, 47)
  10. 900oklch(0.18 0.04 195)#001717rgb(0, 23, 23)
  11. 950oklch(0.11 0.02 195)#000606rgb(0, 6, 6)

green

  1. 50oklch(0.99 0.01 146)#f8fef8rgb(248, 254, 248)
  2. 100oklch(0.97 0.05 146)#e1ffe1rgb(225, 255, 225)
  3. 200oklch(0.96 0.08 146)#d0ffd2rgb(208, 255, 210)
  4. 300oklch(0.93 0.13 146)#aeffb3rgb(174, 255, 179)
  5. 400oklch(0.86 0.19 146)#72f181rgb(114, 241, 129)
  6. 500oklch(0.68 0.15 146)#51b05crgb(81, 176, 92)
  7. 600oklch(0.56 0.13 146)#388842rgb(56, 136, 66)
  8. 700oklch(0.38 0.09 146)#1c4f23rgb(28, 79, 35)
  9. 800oklch(0.28 0.06 146)#123116rgb(18, 49, 22)
  10. 900oklch(0.19 0.04 146)#071808rgb(7, 24, 8)
  11. 950oklch(0.11 0.02 146)#020602rgb(2, 6, 2)

yellow

  1. 50oklch(0.99 0.01 105)#fdfcf5rgb(253, 252, 245)
  2. 100oklch(0.98 0.05 105)#fdfbd4rgb(253, 251, 212)
  3. 200oklch(0.96 0.08 105)#f9f6b7rgb(249, 246, 183)
  4. 300oklch(0.94 0.13 105)#f8f085rgb(248, 240, 133)
  5. 400oklch(0.87 0.19 105)#e8d900rgb(232, 217, 0)
  6. 500oklch(0.7 0.15 105)#ada200rgb(173, 162, 0)
  7. 600oklch(0.57 0.13 105)#837a00rgb(131, 122, 0)
  8. 700oklch(0.39 0.09 105)#4d4700rgb(77, 71, 0)
  9. 800oklch(0.28 0.06 105)#2d2a00rgb(45, 42, 0)
  10. 900oklch(0.19 0.04 105)#171500rgb(23, 21, 0)
  11. 950oklch(0.11 0.02 105)#050500rgb(5, 5, 0)

neutral

  1. 50oklch(0.99 0.005 90)#fdfcf8rgb(253, 252, 248)
  2. 100oklch(0.97 0.008 90)#f7f5efrgb(247, 245, 239)
  3. 200oklch(0.95 0.01 90)#f1eee7rgb(241, 238, 231)
  4. 300oklch(0.9 0.012 90)#e1ded5rgb(225, 222, 213)
  5. 400oklch(0.8 0.014 90)#c1bdb4rgb(193, 189, 180)
  6. 500oklch(0.65 0.012 90)#928f87rgb(146, 143, 135)
  7. 600oklch(0.5 0.01 90)#65635drgb(101, 99, 93)
  8. 700oklch(0.38 0.008 90)#44423ergb(68, 66, 62)
  9. 800oklch(0.28 0.006 90)#2a2926rgb(42, 41, 38)
  10. 900oklch(0.1913 0 0)#141414rgb(20, 20, 20)
  11. 950oklch(0.1 0 90)#030303rgb(3, 3, 3)