Chocolate Castle to Broad Daylight Color Palette

About this palette

Chocolate Castle to Broad Daylight is a 4-color vintage palette: #4A2900 (Chocolate Castle), #006889 (Copacabana), #DB762A (Holy Cannoli), #B7DFFF (Broad Daylight). It mixes brown, blue, orange tones and feels balanced overall. The strongest text pairing is #4A2900 on #B7DFFF with a contrast ratio of 9.33:1, and 1 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Chocolate Castle	rgb(74, 41, 0)	hsl(33, 100%, 15%)
Copacabana	rgb(0, 104, 137)	hsl(194, 100%, 27%)
Holy Cannoli	rgb(219, 118, 42)	hsl(26, 71%, 51%)
Broad Daylight	rgb(183, 223, 255)	hsl(207, 100%, 86%)

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.

Aa9.33:1 Very good#4A2900 on #B7DFFF
Aa9.33:1 Very good#B7DFFF on #4A2900
Aa4.49:1 Poor#006889 on #B7DFFF
Aa4.49:1 Poor#B7DFFF on #006889
Aa4.13:1 Poor#4A2900 on #DB762A
Aa4.13:1 Poor#DB762A on #4A2900

Color blindness preview

CSS variables

/* Chocolate Castle to Broad Daylight — https://swatchly.xyz/palette/4a2900-006889-db762a-b7dfff */
:root {
  --chocolate-castle: #4a2900;
  --copacabana: #006889;
  --holy-cannoli: #db762a;
  --broad-daylight: #b7dfff;
}

Tailwind CSS v4

/* Chocolate Castle to Broad Daylight — https://swatchly.xyz/palette/4a2900-006889-db762a-b7dfff */
@theme {
  --color-chocolate-castle: #4a2900;
  --color-chocolate-castle-50: #fff3e8;
  --color-chocolate-castle-100: #ffe6cf;
  --color-chocolate-castle-200: #f0d1b4;
  --color-chocolate-castle-300: #ddba98;
  --color-chocolate-castle-400: #bf9974;
  --color-chocolate-castle-500: #a47d58;
  --color-chocolate-castle-600: #87633f;
  --color-chocolate-castle-700: #6e4d2b;
  --color-chocolate-castle-800: #573b1d;
  --color-chocolate-castle-900: #4a2900;
  --color-chocolate-castle-950: #2c1a08;
  --color-copacabana: #006889;
  --color-copacabana-50: #e9f8ff;
  --color-copacabana-100: #d3f1ff;
  --color-copacabana-200: #aae3fe;
  --color-copacabana-300: #8dcfee;
  --color-copacabana-400: #66b2d4;
  --color-copacabana-500: #4698ba;
  --color-copacabana-600: #297ea0;
  --color-copacabana-700: #006889;
  --color-copacabana-800: #00516c;
  --color-copacabana-900: #003f54;
  --color-copacabana-950: #002737;
  --color-holy-cannoli: #db762a;
  --color-holy-cannoli-50: #ffece1;
  --color-holy-cannoli-100: #ffdcc8;
  --color-holy-cannoli-200: #ffbe96;
  --color-holy-cannoli-300: #f99c5e;
  --color-holy-cannoli-400: #db762a;
  --color-holy-cannoli-500: #be5d00;
  --color-holy-cannoli-600: #9a4a00;
  --color-holy-cannoli-700: #7c3b00;
  --color-holy-cannoli-800: #632e00;
  --color-holy-cannoli-900: #4f2300;
  --color-holy-cannoli-950: #351500;
  --color-broad-daylight: #b7dfff;
  --color-broad-daylight-50: #eff8ff;
  --color-broad-daylight-100: #ddf0ff;
  --color-broad-daylight-200: #b7dfff;
  --color-broad-daylight-300: #a6c7e2;
  --color-broad-daylight-400: #83a8c5;
  --color-broad-daylight-500: #668ca9;
  --color-broad-daylight-600: #4d718d;
  --color-broad-daylight-700: #395973;
  --color-broad-daylight-800: #29465c;
  --color-broad-daylight-900: #1d3648;
  --color-broad-daylight-950: #0f212e;
}