Coco’s Black to Cloud Break Color Palette

About this palette

Coco’s Black to Cloud Break is a 4-color muted palette: #1E1E15 (Coco’s Black), #67613E (Ochicha Latte), #9797C1 (Easter Egg), #F3F4FF (Cloud Break). It mixes gray, brown, purple, white tones and feels balanced overall. The strongest text pairing is #1E1E15 on #F3F4FF with a contrast ratio of 15.33:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Coco’s Black	rgb(30, 30, 21)	hsl(60, 18%, 10%)
Ochicha Latte	rgb(103, 97, 62)	hsl(51, 25%, 32%)
Easter Egg	rgb(151, 151, 193)	hsl(240, 25%, 67%)
Cloud Break	rgb(243, 244, 255)	hsl(235, 100%, 98%)

Accessible color pairs

Pairs with at least 3:1 contrast (large text and UI components); 4.5:1 or more passes WCAG AA for body text.

Aa15.33:1 Super#1E1E15 on #F3F4FF
Aa15.33:1 Super#F3F4FF on #1E1E15
Aa6.00:1 Good#1E1E15 on #9797C1
Aa6.00:1 Good#9797C1 on #1E1E15
Aa5.72:1 Good#67613E on #F3F4FF
Aa5.72:1 Good#F3F4FF on #67613E

Color blindness preview

CSS variables

/* Coco’s Black to Cloud Break — https://swatchly.xyz/palette/1e1e15-67613e-9797c1-f3f4ff */
:root {
  --coco-s-black: #1e1e15;
  --ochicha-latte: #67613e;
  --easter-egg: #9797c1;
  --cloud-break: #f3f4ff;
}

Tailwind CSS v4

/* Coco’s Black to Cloud Break — https://swatchly.xyz/palette/1e1e15-67613e-9797c1-f3f4ff */
@theme {
  --color-coco-s-black: #1e1e15;
  --color-coco-s-black-50: #f5f6ef;
  --color-coco-s-black-100: #ecece4;
  --color-coco-s-black-200: #d8d8cf;
  --color-coco-s-black-300: #c1c2b7;
  --color-coco-s-black-400: #a2a297;
  --color-coco-s-black-500: #86877b;
  --color-coco-s-black-600: #6c6c61;
  --color-coco-s-black-700: #55554b;
  --color-coco-s-black-800: #414239;
  --color-coco-s-black-900: #32322b;
  --color-coco-s-black-950: #1e1e15;
  --color-ochicha-latte: #67613e;
  --color-ochicha-latte-50: #f9f6e0;
  --color-ochicha-latte-100: #f0ecd4;
  --color-ochicha-latte-200: #dfdbbe;
  --color-ochicha-latte-300: #cbc6a6;
  --color-ochicha-latte-400: #afa985;
  --color-ochicha-latte-500: #958f6b;
  --color-ochicha-latte-600: #7c7653;
  --color-ochicha-latte-700: #67613e;
  --color-ochicha-latte-800: #514c2e;
  --color-ochicha-latte-900: #3e3a20;
  --color-ochicha-latte-950: #282411;
  --color-easter-egg: #9797c1;
  --color-easter-egg-50: #f1f2ff;
  --color-easter-egg-100: #e5e5ff;
  --color-easter-egg-200: #cfd0f2;
  --color-easter-egg-300: #b7b8de;
  --color-easter-egg-400: #9797c1;
  --color-easter-egg-500: #7d7da5;
  --color-easter-egg-600: #64648a;
  --color-easter-egg-700: #4f4e71;
  --color-easter-egg-800: #3e3d5b;
  --color-easter-egg-900: #2f2f48;
  --color-easter-egg-950: #1d1d2f;
  --color-cloud-break: #f3f4ff;
  --color-cloud-break-50: #f3f4ff;
  --color-cloud-break-100: #eaeaf1;
  --color-cloud-break-200: #d6d7df;
  --color-cloud-break-300: #bfc0c9;
  --color-cloud-break-400: #a0a1aa;
  --color-cloud-break-500: #84858f;
  --color-cloud-break-600: #6a6b74;
  --color-cloud-break-700: #54545d;
  --color-cloud-break-800: #414249;
  --color-cloud-break-900: #323238;
  --color-cloud-break-950: #1e1f23;
}