Otterly Brown to Deadly Depths Color Palette

About this palette

Otterly Brown to Deadly Depths is a 4-color cool palette: #934300 (Otterly Brown), #00A180 (Paolo Veronese Green), #CDD6FF (Icy Plains), #1A1240 (Deadly Depths). It mixes brown, turquoise, purple tones and feels cool overall. The strongest text pairing is #CDD6FF on #1A1240 with a contrast ratio of 12.17:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Otterly Brown	rgb(147, 67, 0)	hsl(27, 100%, 29%)
Paolo Veronese Green	rgb(0, 161, 128)	hsl(168, 100%, 32%)
Icy Plains	rgb(205, 214, 255)	hsl(229, 100%, 90%)
Deadly Depths	rgb(26, 18, 64)	hsl(250, 56%, 16%)

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.

Aa12.17:1 Super#CDD6FF on #1A1240
Aa12.17:1 Super#1A1240 on #CDD6FF
Aa5.32:1 Good#00A180 on #1A1240
Aa5.32:1 Good#1A1240 on #00A180
Aa4.82:1 Good#934300 on #CDD6FF
Aa4.82:1 Good#CDD6FF on #934300

Color blindness preview

CSS variables

/* Otterly Brown to Deadly Depths — https://swatchly.xyz/palette/934300-00a180-cdd6ff-1a1240 */
:root {
  --otterly-brown: #934300;
  --paolo-veronese-green: #00a180;
  --icy-plains: #cdd6ff;
  --deadly-depths: #1a1240;
}

Tailwind CSS v4

/* Otterly Brown to Deadly Depths — https://swatchly.xyz/palette/934300-00a180-cdd6ff-1a1240 */
@theme {
  --color-otterly-brown: #934300;
  --color-otterly-brown-50: #fff2eb;
  --color-otterly-brown-100: #ffe5d7;
  --color-otterly-brown-200: #ffcdb1;
  --color-otterly-brown-300: #fcb085;
  --color-otterly-brown-400: #e28f5e;
  --color-otterly-brown-500: #c7733f;
  --color-otterly-brown-600: #ab5924;
  --color-otterly-brown-700: #934300;
  --color-otterly-brown-800: #743300;
  --color-otterly-brown-900: #5b2700;
  --color-otterly-brown-950: #3b1700;
  --color-paolo-veronese-green: #00a180;
  --color-paolo-veronese-green-50: #dcfff2;
  --color-paolo-veronese-green-100: #b9fde6;
  --color-paolo-veronese-green-200: #9aedd2;
  --color-paolo-veronese-green-300: #77d9bb;
  --color-paolo-veronese-green-400: #44bc9b;
  --color-paolo-veronese-green-500: #00a180;
  --color-paolo-veronese-green-600: #008267;
  --color-paolo-veronese-green-700: #006751;
  --color-paolo-veronese-green-800: #00513f;
  --color-paolo-veronese-green-900: #003e30;
  --color-paolo-veronese-green-950: #00271d;
  --color-icy-plains: #cdd6ff;
  --color-icy-plains-50: #f3f5ff;
  --color-icy-plains-100: #e6ebff;
  --color-icy-plains-200: #cdd6ff;
  --color-icy-plains-300: #b8c0e2;
  --color-icy-plains-400: #98a0c5;
  --color-icy-plains-500: #7c84aa;
  --color-icy-plains-600: #626a8d;
  --color-icy-plains-700: #4d5373;
  --color-icy-plains-800: #3b405c;
  --color-icy-plains-900: #2d3149;
  --color-icy-plains-950: #1b1e2f;
  --color-deadly-depths: #1a1240;
  --color-deadly-depths-50: #f4f4ff;
  --color-deadly-depths-100: #e9e9ff;
  --color-deadly-depths-200: #d3d2ff;
  --color-deadly-depths-300: #bcbbee;
  --color-deadly-depths-400: #9c9bd2;
  --color-deadly-depths-500: #807eb6;
  --color-deadly-depths-600: #666398;
  --color-deadly-depths-700: #4f4d7c;
  --color-deadly-depths-800: #3c3a62;
  --color-deadly-depths-900: #2d2b4c;
  --color-deadly-depths-950: #1a1240;
}