Start generating

Ochicha Latte to Nirvana color palette

665C3EOchicha LatteF4EFFFCloud BreakADBEB0Irish Moor5A7A61Emerald City3A3423Graphite9D8FA3Nirvana
Open in generator Export PNG, PDF, ASE…

About this palette

Ochicha Latte to Nirvana is a 6-color muted palette: #665C3E (Ochicha Latte), #F4EFFF (Cloud Break), #ADBEB0 (Irish Moor), #5A7A61 (Emerald City), #3A3423 (Graphite), #9D8FA3 (Nirvana). It mixes brown, white, gray, green tones and feels balanced overall. The strongest text pairing is #F4EFFF on #3A3423 with a contrast ratio of 10.99:1, and 3 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Ochicha Lattergb(102, 92, 62)hsl(45, 24%, 32%)
Cloud Breakrgb(244, 239, 255)hsl(259, 100%, 97%)
Irish Moorrgb(173, 190, 176)hsl(131, 12%, 71%)
Emerald Cityrgb(90, 122, 97)hsl(133, 15%, 42%)
Graphitergb(58, 52, 35)hsl(44, 25%, 18%)
Nirvanargb(157, 143, 163)hsl(282, 10%, 60%)

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.

  • Aa10.99:1 Very good#F4EFFF on #3A3423
  • Aa10.99:1 Very good#3A3423 on #F4EFFF
  • Aa6.35:1 Good#ADBEB0 on #3A3423
  • Aa6.35:1 Good#3A3423 on #ADBEB0
  • Aa5.89:1 Good#665C3E on #F4EFFF
  • Aa5.89:1 Good#F4EFFF on #665C3E
  • Aa4.24:1 Poor#F4EFFF on #5A7A61
  • Aa4.24:1 Poor#5A7A61 on #F4EFFF

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Ochicha Latte to Nirvana — https://swatchly.xyz/palette/665c3e-f4efff-adbeb0-5a7a61-3a3423-9d8fa3 */
:root {
  --ochicha-latte: #665c3e;
  --cloud-break: #f4efff;
  --irish-moor: #adbeb0;
  --emerald-city: #5a7a61;
  --graphite: #3a3423;
  --nirvana: #9d8fa3;
}

Tailwind CSS v4

/* Ochicha Latte to Nirvana — https://swatchly.xyz/palette/665c3e-f4efff-adbeb0-5a7a61-3a3423-9d8fa3 */
@theme {
  --color-ochicha-latte: #665c3e;
  --color-ochicha-latte-50: #fbf5e2;
  --color-ochicha-latte-100: #f2ebd6;
  --color-ochicha-latte-200: #e1d9c0;
  --color-ochicha-latte-300: #cdc3a8;
  --color-ochicha-latte-400: #afa587;
  --color-ochicha-latte-500: #958b6c;
  --color-ochicha-latte-600: #7c7253;
  --color-ochicha-latte-700: #665c3e;
  --color-ochicha-latte-800: #50482f;
  --color-ochicha-latte-900: #3e3721;
  --color-ochicha-latte-950: #272212;
  --color-cloud-break: #f4efff;
  --color-cloud-break-50: #f4efff;
  --color-cloud-break-100: #eae7f1;
  --color-cloud-break-200: #d7d3df;
  --color-cloud-break-300: #c1bdca;
  --color-cloud-break-400: #a29eac;
  --color-cloud-break-500: #878391;
  --color-cloud-break-600: #6d6977;
  --color-cloud-break-700: #57535f;
  --color-cloud-break-800: #44404b;
  --color-cloud-break-900: #34313a;
  --color-cloud-break-950: #201e24;
  --color-irish-moor: #adbeb0;
  --color-irish-moor-50: #eaf4ec;
  --color-irish-moor-100: #dee9e0;
  --color-irish-moor-200: #c7d5ca;
  --color-irish-moor-300: #adbeb0;
  --color-irish-moor-400: #90a093;
  --color-irish-moor-500: #768679;
  --color-irish-moor-600: #5e6d60;
  --color-irish-moor-700: #49574c;
  --color-irish-moor-800: #39453b;
  --color-irish-moor-900: #2c362e;
  --color-irish-moor-950: #1a211b;
  --color-emerald-city: #5a7a61;
  --color-emerald-city-50: #e8fbeb;
  --color-emerald-city-100: #ddf3e1;
  --color-emerald-city-200: #c8e1cd;
  --color-emerald-city-300: #afccb5;
  --color-emerald-city-400: #8faf95;
  --color-emerald-city-500: #73947a;
  --color-emerald-city-600: #5a7a61;
  --color-emerald-city-700: #44624b;
  --color-emerald-city-800: #334d39;
  --color-emerald-city-900: #253b2a;
  --color-emerald-city-950: #152519;
  --color-graphite: #3a3423;
  --color-graphite-50: #f9f5e9;
  --color-graphite-100: #f0ebde;
  --color-graphite-200: #ddd7c8;
  --color-graphite-300: #c7c1af;
  --color-graphite-400: #a8a28e;
  --color-graphite-500: #8d8673;
  --color-graphite-600: #736c5a;
  --color-graphite-700: #5c5645;
  --color-graphite-800: #494335;
  --color-graphite-900: #3a3423;
  --color-graphite-950: #232017;
  --color-nirvana: #9d8fa3;
  --color-nirvana-50: #f6edfa;
  --color-nirvana-100: #eae0ef;
  --color-nirvana-200: #d5cada;
  --color-nirvana-300: #beb1c3;
  --color-nirvana-400: #9d8fa3;
  --color-nirvana-500: #84768a;
  --color-nirvana-600: #6b5f71;
  --color-nirvana-700: #564b5b;
  --color-nirvana-800: #443b49;
  --color-nirvana-900: #362d3a;
  --color-nirvana-950: #231d25;
}

Similar palettes