Oh Boy! to Over the Hills Color Palette

About this palette

Oh Boy! to Over the Hills is a 5-color cool palette: #B4D7FF (Oh Boy!), #D3A051 (Chipmunk), #A26EC5 (Viola), #0E3866 (Lost in Space), #496A04 (Over the Hills). It mixes blue, yellow, purple, green tones and feels cool overall. The strongest text pairing is #B4D7FF on #0E3866 with a contrast ratio of 7.94:1, and 2 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Oh Boy!	rgb(180, 215, 255)	hsl(212, 100%, 85%)
Chipmunk	rgb(211, 160, 81)	hsl(36, 60%, 57%)
Viola	rgb(162, 110, 197)	hsl(276, 43%, 60%)
Lost in Space	rgb(14, 56, 102)	hsl(211, 76%, 23%)
Over the Hills	rgb(73, 106, 4)	hsl(79, 93%, 22%)

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.

Aa7.94:1 Very good#B4D7FF on #0E3866
Aa7.94:1 Very good#0E3866 on #B4D7FF
Aa5.02:1 Good#D3A051 on #0E3866
Aa5.02:1 Good#0E3866 on #D3A051
Aa4.21:1 Poor#B4D7FF on #496A04
Aa4.21:1 Poor#496A04 on #B4D7FF
Aa3.14:1 Poor#A26EC5 on #0E3866
Aa3.14:1 Poor#0E3866 on #A26EC5

Color blindness preview

CSS variables

/* Oh Boy! to Over the Hills — https://swatchly.xyz/palette/b4d7ff-d3a051-a26ec5-0e3866-496a04 */
:root {
  --oh-boy: #b4d7ff;
  --chipmunk: #d3a051;
  --viola: #a26ec5;
  --lost-in-space: #0e3866;
  --over-the-hills: #496a04;
}

Tailwind CSS v4

/* Oh Boy! to Over the Hills — https://swatchly.xyz/palette/b4d7ff-d3a051-a26ec5-0e3866-496a04 */
@theme {
  --color-oh-boy: #b4d7ff;
  --color-oh-boy-50: #eaf3ff;
  --color-oh-boy-100: #d8eaff;
  --color-oh-boy-200: #b4d7ff;
  --color-oh-boy-300: #a3c1e3;
  --color-oh-boy-400: #82a2c7;
  --color-oh-boy-500: #6787ac;
  --color-oh-boy-600: #4e6d90;
  --color-oh-boy-700: #3b5776;
  --color-oh-boy-800: #2b4460;
  --color-oh-boy-900: #1f344c;
  --color-oh-boy-950: #112031;
  --color-chipmunk: #d3a051;
  --color-chipmunk-50: #fff7ec;
  --color-chipmunk-100: #ffedd4;
  --color-chipmunk-200: #fcd7a2;
  --color-chipmunk-300: #ebc182;
  --color-chipmunk-400: #d3a051;
  --color-chipmunk-500: #b48332;
  --color-chipmunk-600: #966708;
  --color-chipmunk-700: #785000;
  --color-chipmunk-800: #5d3e00;
  --color-chipmunk-900: #482e00;
  --color-chipmunk-950: #2d1b00;
  --color-viola: #a26ec5;
  --color-viola-50: #f9f2ff;
  --color-viola-100: #f4e5ff;
  --color-viola-200: #e9cbff;
  --color-viola-300: #daadfa;
  --color-viola-400: #bd8be0;
  --color-viola-500: #a26ec5;
  --color-viola-600: #8653a7;
  --color-viola-700: #6d3e8a;
  --color-viola-800: #562d70;
  --color-viola-900: #442059;
  --color-viola-950: #2b123b;
  --color-lost-in-space: #0e3866;
  --color-lost-in-space-50: #eff6ff;
  --color-lost-in-space-100: #deedff;
  --color-lost-in-space-200: #bddaff;
  --color-lost-in-space-300: #9ec4f4;
  --color-lost-in-space-400: #7ca6d9;
  --color-lost-in-space-500: #608bbf;
  --color-lost-in-space-600: #4771a3;
  --color-lost-in-space-700: #345b88;
  --color-lost-in-space-800: #264871;
  --color-lost-in-space-900: #0e3866;
  --color-lost-in-space-950: #0e243e;
  --color-over-the-hills: #496a04;
  --color-over-the-hills-50: #e8ffce;
  --color-over-the-hills-100: #dcf6bf;
  --color-over-the-hills-200: #c8e5a5;
  --color-over-the-hills-300: #b1d188;
  --color-over-the-hills-400: #91b461;
  --color-over-the-hills-500: #769a43;
  --color-over-the-hills-600: #5e8027;
  --color-over-the-hills-700: #496a04;
  --color-over-the-hills-800: #385300;
  --color-over-the-hills-900: #2a4000;
  --color-over-the-hills-950: #192900;
}