Peach Cream to Viking Color Palette

About this palette

Peach Cream to Viking is a 4-color muted palette: #FFEED9 (Peach Cream), #303147 (Shuriken), #7B5E41 (Man Cave), #49AFCB (Viking). It mixes white, purple, brown, blue tones and feels cool overall. The strongest text pairing is #FFEED9 on #303147 with a contrast ratio of 11.16:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Peach Cream	rgb(255, 238, 217)	hsl(33, 100%, 93%)
Shuriken	rgb(48, 49, 71)	hsl(237, 19%, 23%)
Man Cave	rgb(123, 94, 65)	hsl(30, 31%, 37%)
Viking	rgb(73, 175, 203)	hsl(193, 56%, 54%)

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.16:1 Very good#FFEED9 on #303147
Aa11.16:1 Very good#303147 on #FFEED9
Aa5.25:1 Good#FFEED9 on #7B5E41
Aa5.25:1 Good#7B5E41 on #FFEED9
Aa5.00:1 Good#303147 on #49AFCB
Aa5.00:1 Good#49AFCB on #303147

Color blindness preview

CSS variables

/* Peach Cream to Viking — https://swatchly.xyz/palette/ffeed9-303147-7b5e41-49afcb */
:root {
  --peach-cream: #ffeed9;
  --shuriken: #303147;
  --man-cave: #7b5e41;
  --viking: #49afcb;
}

Tailwind CSS v4

/* Peach Cream to Viking — https://swatchly.xyz/palette/ffeed9-303147-7b5e41-49afcb */
@theme {
  --color-peach-cream: #ffeed9;
  --color-peach-cream-50: #ffeed9;
  --color-peach-cream-100: #f1e6d8;
  --color-peach-cream-200: #dfd3c3;
  --color-peach-cream-300: #cabcab;
  --color-peach-cream-400: #ad9e8b;
  --color-peach-cream-500: #928370;
  --color-peach-cream-600: #786957;
  --color-peach-cream-700: #605343;
  --color-peach-cream-800: #4c4032;
  --color-peach-cream-900: #3b3125;
  --color-peach-cream-950: #251e15;
  --color-shuriken: #303147;
  --color-shuriken-50: #f3f4ff;
  --color-shuriken-100: #e8eafb;
  --color-shuriken-200: #d4d6eb;
  --color-shuriken-300: #bdbfd7;
  --color-shuriken-400: #9d9fb9;
  --color-shuriken-500: #82849e;
  --color-shuriken-600: #686a82;
  --color-shuriken-700: #52546a;
  --color-shuriken-800: #404154;
  --color-shuriken-900: #303147;
  --color-shuriken-950: #1e1e2a;
  --color-man-cave: #7b5e41;
  --color-man-cave-50: #fff3e7;
  --color-man-cave-100: #fbe6d1;
  --color-man-cave-200: #e9d0b8;
  --color-man-cave-300: #d3b79c;
  --color-man-cave-400: #b49678;
  --color-man-cave-500: #98795b;
  --color-man-cave-600: #7b5e41;
  --color-man-cave-700: #634a30;
  --color-man-cave-800: #4f3923;
  --color-man-cave-900: #3e2b19;
  --color-man-cave-950: #271a0d;
  --color-viking: #49afcb;
  --color-viking-50: #e5f9ff;
  --color-viking-100: #caf2ff;
  --color-viking-200: #9de3f9;
  --color-viking-300: #7bcee6;
  --color-viking-400: #49afcb;
  --color-viking-500: #2693ae;
  --color-viking-600: #007790;
  --color-viking-700: #005f73;
  --color-viking-800: #004a5b;
  --color-viking-900: #003947;
  --color-viking-950: #00242d;
}