Oak Barrel to Kiss a Frog Color Palette

About this palette

Oak Barrel to Kiss a Frog is a 5-color muted, warm, earthy, vintage palette: #74552F (Oak Barrel), #FFE8D9 (Blossom), #4D2E26 (Couch), #A58984 (Earthbound), #C5BC89 (Kiss a Frog). It mixes brown, white, red, yellow tones and feels warm overall. The strongest text pairing is #FFE8D9 on #4D2E26 with a contrast ratio of 10.26:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oak Barrel	rgb(116, 85, 47)	hsl(33, 42%, 32%)
Blossom	rgb(255, 232, 217)	hsl(24, 100%, 93%)
Couch	rgb(77, 46, 38)	hsl(12, 34%, 23%)
Earthbound	rgb(165, 137, 132)	hsl(9, 15%, 58%)
Kiss a Frog	rgb(197, 188, 137)	hsl(51, 34%, 65%)

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.

Aa10.26:1 Very good#FFE8D9 on #4D2E26
Aa10.26:1 Very good#4D2E26 on #FFE8D9
Aa6.30:1 Good#4D2E26 on #C5BC89
Aa6.30:1 Good#C5BC89 on #4D2E26
Aa5.77:1 Good#74552F on #FFE8D9
Aa5.77:1 Good#FFE8D9 on #74552F
Aa3.75:1 Poor#4D2E26 on #A58984
Aa3.75:1 Poor#A58984 on #4D2E26

Color blindness preview

CSS variables

/* Oak Barrel to Kiss a Frog — https://swatchly.xyz/palette/74552f-ffe8d9-4d2e26-a58984-c5bc89 */
:root {
  --oak-barrel: #74552f;
  --blossom: #ffe8d9;
  --couch: #4d2e26;
  --earthbound: #a58984;
  --kiss-a-frog: #c5bc89;
}

Tailwind CSS v4

/* Oak Barrel to Kiss a Frog — https://swatchly.xyz/palette/74552f-ffe8d9-4d2e26-a58984-c5bc89 */
@theme {
  --color-oak-barrel: #74552f;
  --color-oak-barrel-50: #fff3e6;
  --color-oak-barrel-100: #fee7ce;
  --color-oak-barrel-200: #eed4b6;
  --color-oak-barrel-300: #dcbe9c;
  --color-oak-barrel-400: #bf9f79;
  --color-oak-barrel-500: #a5845d;
  --color-oak-barrel-600: #8b6b45;
  --color-oak-barrel-700: #74552f;
  --color-oak-barrel-800: #5c4222;
  --color-oak-barrel-900: #483216;
  --color-oak-barrel-950: #2e1e0a;
  --color-blossom: #ffe8d9;
  --color-blossom-50: #fff4ed;
  --color-blossom-100: #ffe8d9;
  --color-blossom-200: #e6d5cb;
  --color-blossom-300: #d1beb2;
  --color-blossom-400: #b29e90;
  --color-blossom-500: #978275;
  --color-blossom-600: #7b685b;
  --color-blossom-700: #635146;
  --color-blossom-800: #4e3f35;
  --color-blossom-900: #3d3027;
  --color-blossom-950: #261d17;
  --color-couch: #4d2e26;
  --color-couch-50: #fff2ee;
  --color-couch-100: #fee5de;
  --color-couch-200: #eed0c8;
  --color-couch-300: #dab8af;
  --color-couch-400: #bd998f;
  --color-couch-500: #a37e74;
  --color-couch-600: #88655c;
  --color-couch-700: #6f5047;
  --color-couch-800: #5a3e37;
  --color-couch-900: #4d2e26;
  --color-couch-950: #2f1e19;
  --color-earthbound: #a58984;
  --color-earthbound-50: #fff4f2;
  --color-earthbound-100: #fdeae7;
  --color-earthbound-200: #edd7d4;
  --color-earthbound-300: #dac2bd;
  --color-earthbound-400: #bea39e;
  --color-earthbound-500: #a58984;
  --color-earthbound-600: #876d68;
  --color-earthbound-700: #6d5551;
  --color-earthbound-800: #56413d;
  --color-earthbound-900: #43312e;
  --color-earthbound-950: #2a1d1b;
  --color-kiss-a-frog: #c5bc89;
  --color-kiss-a-frog-50: #f8f3d5;
  --color-kiss-a-frog-100: #eee8c7;
  --color-kiss-a-frog-200: #dad3ac;
  --color-kiss-a-frog-300: #c5bc89;
  --color-kiss-a-frog-400: #a69e6d;
  --color-kiss-a-frog-500: #8c8352;
  --color-kiss-a-frog-600: #726a3b;
  --color-kiss-a-frog-700: #5c5429;
  --color-kiss-a-frog-800: #49421b;
  --color-kiss-a-frog-900: #393312;
  --color-kiss-a-frog-950: #241f07;
}