Start generating

White Strawberry to Secret Passage color palette

FFE3B0White StrawberryA2B1FFWondrous WisteriaB28D40Pirate’s Hook0954D3Frosted Blueberries2F3F73Napoleonic Blue2D2600Secret Passage
Open in generator Export PNG, PDF, ASE…

About this palette

White Strawberry to Secret Passage is a 6-color palette: #FFE3B0 (White Strawberry), #A2B1FF (Wondrous Wisteria), #B28D40 (Pirate’s Hook), #0954D3 (Frosted Blueberries), #2F3F73 (Napoleonic Blue), #2D2600 (Secret Passage). It mixes yellow, purple, blue, brown tones and feels balanced overall. The strongest text pairing is #FFE3B0 on #2D2600 with a contrast ratio of 12.14:1, and 6 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
White Strawberryrgb(255, 227, 176)hsl(39, 100%, 85%)
Wondrous Wisteriargb(162, 177, 255)hsl(230, 100%, 82%)
Pirate’s Hookrgb(178, 141, 64)hsl(41, 47%, 47%)
Frosted Blueberriesrgb(9, 84, 211)hsl(218, 92%, 43%)
Napoleonic Bluergb(47, 63, 115)hsl(226, 42%, 32%)
Secret Passagergb(45, 38, 0)hsl(51, 100%, 9%)

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.14:1 Super#FFE3B0 on #2D2600
  • Aa12.14:1 Super#2D2600 on #FFE3B0
  • Aa8.11:1 Very good#FFE3B0 on #2F3F73
  • Aa8.11:1 Very good#2F3F73 on #FFE3B0
  • Aa7.39:1 Very good#A2B1FF on #2D2600
  • Aa7.39:1 Very good#2D2600 on #A2B1FF
  • Aa5.24:1 Good#FFE3B0 on #0954D3
  • Aa5.24:1 Good#0954D3 on #FFE3B0

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* White Strawberry to Secret Passage — https://swatchly.xyz/palette/ffe3b0-a2b1ff-b28d40-0954d3-2f3f73-2d2600 */
:root {
  --white-strawberry: #ffe3b0;
  --wondrous-wisteria: #a2b1ff;
  --pirate-s-hook: #b28d40;
  --frosted-blueberries: #0954d3;
  --napoleonic-blue: #2f3f73;
  --secret-passage: #2d2600;
}

Tailwind CSS v4

/* White Strawberry to Secret Passage — https://swatchly.xyz/palette/ffe3b0-a2b1ff-b28d40-0954d3-2f3f73-2d2600 */
@theme {
  --color-white-strawberry: #ffe3b0;
  --color-white-strawberry-50: #fff0d4;
  --color-white-strawberry-100: #ffe3b0;
  --color-white-strawberry-200: #e6d1ab;
  --color-white-strawberry-300: #d2bb90;
  --color-white-strawberry-400: #b59c6d;
  --color-white-strawberry-500: #9a8151;
  --color-white-strawberry-600: #806739;
  --color-white-strawberry-700: #685226;
  --color-white-strawberry-800: #523f18;
  --color-white-strawberry-900: #40300e;
  --color-white-strawberry-950: #291d06;
  --color-wondrous-wisteria: #a2b1ff;
  --color-wondrous-wisteria-50: #ebefff;
  --color-wondrous-wisteria-100: #dce3ff;
  --color-wondrous-wisteria-200: #c1ccff;
  --color-wondrous-wisteria-300: #a2b1ff;
  --color-wondrous-wisteria-400: #8693dd;
  --color-wondrous-wisteria-500: #6d79c3;
  --color-wondrous-wisteria-600: #5660a6;
  --color-wondrous-wisteria-700: #434c8b;
  --color-wondrous-wisteria-800: #333b72;
  --color-wondrous-wisteria-900: #272d5d;
  --color-wondrous-wisteria-950: #171b3d;
  --color-pirate-s-hook: #b28d40;
  --color-pirate-s-hook-50: #fff7e7;
  --color-pirate-s-hook-100: #ffeece;
  --color-pirate-s-hook-200: #f6dba7;
  --color-pirate-s-hook-300: #e5c68a;
  --color-pirate-s-hook-400: #caa762;
  --color-pirate-s-hook-500: #b28d40;
  --color-pirate-s-hook-600: #94701f;
  --color-pirate-s-hook-700: #785700;
  --color-pirate-s-hook-800: #5d4300;
  --color-pirate-s-hook-900: #473300;
  --color-pirate-s-hook-950: #2d1e00;
  --color-frosted-blueberries: #0954d3;
  --color-frosted-blueberries-50: #f0f5ff;
  --color-frosted-blueberries-100: #ddeaff;
  --color-frosted-blueberries-200: #bcd4ff;
  --color-frosted-blueberries-300: #95bbff;
  --color-frosted-blueberries-400: #5c96ff;
  --color-frosted-blueberries-500: #2d73f5;
  --color-frosted-blueberries-600: #0954d3;
  --color-frosted-blueberries-700: #0041ae;
  --color-frosted-blueberries-800: #00328b;
  --color-frosted-blueberries-900: #00266f;
  --color-frosted-blueberries-950: #00164a;
  --color-napoleonic-blue: #2f3f73;
  --color-napoleonic-blue-50: #f1f5ff;
  --color-napoleonic-blue-100: #e3ebff;
  --color-napoleonic-blue-200: #c8d7ff;
  --color-napoleonic-blue-300: #acc0f4;
  --color-napoleonic-blue-400: #8ba0d9;
  --color-napoleonic-blue-500: #7084be;
  --color-napoleonic-blue-600: #5769a0;
  --color-napoleonic-blue-700: #425385;
  --color-napoleonic-blue-800: #2f3f73;
  --color-napoleonic-blue-900: #253156;
  --color-napoleonic-blue-950: #151e38;
  --color-secret-passage: #2d2600;
  --color-secret-passage-50: #faf6df;
  --color-secret-passage-100: #f1ecd2;
  --color-secret-passage-200: #ded8ba;
  --color-secret-passage-300: #c8c29f;
  --color-secret-passage-400: #aaa27c;
  --color-secret-passage-500: #908862;
  --color-secret-passage-600: #766f4a;
  --color-secret-passage-700: #605a37;
  --color-secret-passage-800: #4e4829;
  --color-secret-passage-900: #3f391e;
  --color-secret-passage-950: #2d2600;
}

Similar palettes