Start generating

Chocolate Castle to Grape Taffy color palette

451D00Chocolate Castle005247Cape Verde00877DGo Go GreenDD6C0024 CarrotD2B1FFViolet HeavenE5DDFFGrape Taffy
Open in generator Export PNG, PDF, ASE…

About this palette

Chocolate Castle to Grape Taffy is a 6-color cool palette: #451D00 (Chocolate Castle), #005247 (Cape Verde), #00877D (Go Go Green), #DD6C00 (24 Carrot), #D2B1FF (Violet Heaven), #E5DDFF (Grape Taffy). It mixes brown, turquoise, orange, purple tones and feels cool overall. The strongest text pairing is #451D00 on #E5DDFF with a contrast ratio of 11.28:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Chocolate Castlergb(69, 29, 0)hsl(25, 100%, 14%)
Cape Verdergb(0, 82, 71)hsl(172, 100%, 16%)
Go Go Greenrgb(0, 135, 125)hsl(176, 100%, 26%)
24 Carrotrgb(221, 108, 0)hsl(29, 100%, 43%)
Violet Heavenrgb(210, 177, 255)hsl(265, 100%, 85%)
Grape Taffyrgb(229, 221, 255)hsl(254, 100%, 93%)

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.

  • Aa11.28:1 Very good#451D00 on #E5DDFF
  • Aa11.28:1 Very good#E5DDFF on #451D00
  • Aa8.03:1 Very good#451D00 on #D2B1FF
  • Aa8.03:1 Very good#D2B1FF on #451D00
  • Aa7.01:1 Very good#005247 on #E5DDFF
  • Aa7.01:1 Very good#E5DDFF on #005247
  • Aa4.99:1 Good#005247 on #D2B1FF
  • Aa4.99:1 Good#D2B1FF on #005247

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Chocolate Castle to Grape Taffy — https://swatchly.xyz/palette/451d00-005247-00877d-dd6c00-d2b1ff-e5ddff */
:root {
  --chocolate-castle: #451d00;
  --cape-verde: #005247;
  --go-go-green: #00877d;
  --c-24-carrot: #dd6c00;
  --violet-heaven: #d2b1ff;
  --grape-taffy: #e5ddff;
}

Tailwind CSS v4

/* Chocolate Castle to Grape Taffy — https://swatchly.xyz/palette/451d00-005247-00877d-dd6c00-d2b1ff-e5ddff */
@theme {
  --color-chocolate-castle: #451d00;
  --color-chocolate-castle-50: #fff2eb;
  --color-chocolate-castle-100: #ffe5d7;
  --color-chocolate-castle-200: #f6ceb7;
  --color-chocolate-castle-300: #e3b69c;
  --color-chocolate-castle-400: #c49477;
  --color-chocolate-castle-500: #a67659;
  --color-chocolate-castle-600: #875b40;
  --color-chocolate-castle-700: #6b442c;
  --color-chocolate-castle-800: #52311d;
  --color-chocolate-castle-900: #451d00;
  --color-chocolate-castle-950: #251308;
  --color-cape-verde: #005247;
  --color-cape-verde-50: #dafef6;
  --color-cape-verde-100: #ccf5ec;
  --color-cape-verde-200: #b2e4d8;
  --color-cape-verde-300: #97cfc3;
  --color-cape-verde-400: #72b1a4;
  --color-cape-verde-500: #549689;
  --color-cape-verde-600: #3a7c70;
  --color-cape-verde-700: #256459;
  --color-cape-verde-800: #005247;
  --color-cape-verde-900: #0b3f36;
  --color-cape-verde-950: #032822;
  --color-go-go-green: #00877d;
  --color-go-go-green-50: #d7fff9;
  --color-go-go-green-100: #c0fbf3;
  --color-go-go-green-200: #a5ebe1;
  --color-go-go-green-300: #85d8cd;
  --color-go-go-green-400: #5abbb0;
  --color-go-go-green-500: #35a196;
  --color-go-go-green-600: #00877d;
  --color-go-go-green-700: #006b63;
  --color-go-go-green-800: #00544d;
  --color-go-go-green-900: #00403b;
  --color-go-go-green-950: #002825;
  --color-c-24-carrot: #dd6c00;
  --color-c-24-carrot-50: #fff5ef;
  --color-c-24-carrot-100: #ffeade;
  --color-c-24-carrot-200: #ffd2b8;
  --color-c-24-carrot-300: #ffb588;
  --color-c-24-carrot-400: #f68a3f;
  --color-c-24-carrot-500: #dd6c00;
  --color-c-24-carrot-600: #b35600;
  --color-c-24-carrot-700: #8f4300;
  --color-c-24-carrot-800: #703300;
  --color-c-24-carrot-900: #572600;
  --color-c-24-carrot-950: #371600;
  --color-violet-heaven: #d2b1ff;
  --color-violet-heaven-50: #f8f4ff;
  --color-violet-heaven-100: #f1e8ff;
  --color-violet-heaven-200: #e2cfff;
  --color-violet-heaven-300: #d2b1ff;
  --color-violet-heaven-400: #b192da;
  --color-violet-heaven-500: #9676bf;
  --color-violet-heaven-600: #7a5ba1;
  --color-violet-heaven-700: #624585;
  --color-violet-heaven-800: #4d346b;
  --color-violet-heaven-900: #3c2655;
  --color-violet-heaven-950: #261638;
  --color-grape-taffy: #e5ddff;
  --color-grape-taffy-50: #efebff;
  --color-grape-taffy-100: #e5ddff;
  --color-grape-taffy-200: #d2cce6;
  --color-grape-taffy-300: #bdb7d3;
  --color-grape-taffy-400: #a098b7;
  --color-grape-taffy-500: #867e9d;
  --color-grape-taffy-600: #6d6582;
  --color-grape-taffy-700: #57516b;
  --color-grape-taffy-800: #443e55;
  --color-grape-taffy-900: #342f43;
  --color-grape-taffy-950: #201d2b;
}

Similar palettes