Dark Roast to Oh Boy! Color Palette

About this palette

Dark Roast to Oh Boy! is a 4-color muted palette: #442E34 (Dark Roast), #897858 (Tobacco Leaf), #6BB89B (Spearmint), #C3D6FF (Oh Boy!). It mixes gray, yellow, turquoise, blue tones and feels cool overall. The strongest text pairing is #442E34 on #C3D6FF with a contrast ratio of 8.53:1, and 2 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Dark Roast	rgb(68, 46, 52)	hsl(344, 19%, 22%)
Tobacco Leaf	rgb(137, 120, 88)	hsl(39, 22%, 44%)
Spearmint	rgb(107, 184, 155)	hsl(157, 35%, 57%)
Oh Boy!	rgb(195, 214, 255)	hsl(221, 100%, 88%)

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.

Aa8.53:1 Very good#442E34 on #C3D6FF
Aa8.53:1 Very good#C3D6FF on #442E34
Aa5.31:1 Good#442E34 on #6BB89B
Aa5.31:1 Good#6BB89B on #442E34

Color blindness preview

CSS variables

/* Dark Roast to Oh Boy! — https://swatchly.xyz/palette/442e34-897858-6bb89b-c3d6ff */
:root {
  --dark-roast: #442e34;
  --tobacco-leaf: #897858;
  --spearmint: #6bb89b;
  --oh-boy: #c3d6ff;
}

Tailwind CSS v4

/* Dark Roast to Oh Boy! — https://swatchly.xyz/palette/442e34-897858-6bb89b-c3d6ff */
@theme {
  --color-dark-roast: #442e34;
  --color-dark-roast-50: #fff1f4;
  --color-dark-roast-100: #f8e6ea;
  --color-dark-roast-200: #e7d1d6;
  --color-dark-roast-300: #d2bac0;
  --color-dark-roast-400: #b49aa1;
  --color-dark-roast-500: #997f86;
  --color-dark-roast-600: #7e656c;
  --color-dark-roast-700: #665056;
  --color-dark-roast-800: #523e43;
  --color-dark-roast-900: #442e34;
  --color-dark-roast-950: #291d20;
  --color-tobacco-leaf: #897858;
  --color-tobacco-leaf-50: #fcf2de;
  --color-tobacco-leaf-100: #f2e5cf;
  --color-tobacco-leaf-200: #decfb5;
  --color-tobacco-leaf-300: #c7b698;
  --color-tobacco-leaf-400: #a69575;
  --color-tobacco-leaf-500: #897858;
  --color-tobacco-leaf-600: #706042;
  --color-tobacco-leaf-700: #5a4c31;
  --color-tobacco-leaf-800: #483b24;
  --color-tobacco-leaf-900: #382e1a;
  --color-tobacco-leaf-950: #241d0e;
  --color-spearmint: #6bb89b;
  --color-spearmint-50: #e1fff2;
  --color-spearmint-100: #ccfae7;
  --color-spearmint-200: #b2e9d2;
  --color-spearmint-300: #95d5bb;
  --color-spearmint-400: #6bb89b;
  --color-spearmint-500: #4e9b7f;
  --color-spearmint-600: #317f64;
  --color-spearmint-700: #1a664e;
  --color-spearmint-800: #08503c;
  --color-spearmint-900: #003e2d;
  --color-spearmint-950: #00261b;
  --color-oh-boy: #c3d6ff;
  --color-oh-boy-50: #eff4ff;
  --color-oh-boy-100: #e0eaff;
  --color-oh-boy-200: #c3d6ff;
  --color-oh-boy-300: #b0c0e2;
  --color-oh-boy-400: #8fa0c6;
  --color-oh-boy-500: #7485ab;
  --color-oh-boy-600: #5b6b8e;
  --color-oh-boy-700: #465575;
  --color-oh-boy-800: #35425e;
  --color-oh-boy-900: #28324a;
  --color-oh-boy-950: #171f30;
}