Black Box to Frozen Landscape Color Palette

About this palette

Black Box to Frozen Landscape is a 4-color vintage palette: #012938 (Black Box), #834400 (Otterly Brown), #D59667 (Summer’s End), #B1E4FC (Frozen Landscape). It mixes blue, brown, orange tones and feels balanced overall. The strongest text pairing is #012938 on #B1E4FC with a contrast ratio of 11.18:1, and 3 of its 6 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Black Box	rgb(1, 41, 56)	hsl(196, 96%, 11%)
Otterly Brown	rgb(131, 68, 0)	hsl(31, 100%, 26%)
Summer’s End	rgb(213, 150, 103)	hsl(26, 57%, 62%)
Frozen Landscape	rgb(177, 228, 252)	hsl(199, 93%, 84%)

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.18:1 Very good#012938 on #B1E4FC
Aa11.18:1 Very good#B1E4FC on #012938
Aa6.10:1 Good#012938 on #D59667
Aa6.10:1 Good#D59667 on #012938
Aa5.51:1 Good#834400 on #B1E4FC
Aa5.51:1 Good#B1E4FC on #834400
Aa3.00:1 Poor#834400 on #D59667
Aa3.00:1 Poor#D59667 on #834400

Color blindness preview

CSS variables

/* Black Box to Frozen Landscape — https://swatchly.xyz/palette/012938-834400-d59667-b1e4fc */
:root {
  --black-box: #012938;
  --otterly-brown: #834400;
  --summer-s-end: #d59667;
  --frozen-landscape: #b1e4fc;
}

Tailwind CSS v4

/* Black Box to Frozen Landscape — https://swatchly.xyz/palette/012938-834400-d59667-b1e4fc */
@theme {
  --color-black-box: #012938;
  --color-black-box-50: #e9f8ff;
  --color-black-box-100: #d7f0fc;
  --color-black-box-200: #bfddeb;
  --color-black-box-300: #a5c7d7;
  --color-black-box-400: #82a8ba;
  --color-black-box-500: #678ea0;
  --color-black-box-600: #4f7485;
  --color-black-box-700: #3b5e6e;
  --color-black-box-800: #2c4b59;
  --color-black-box-900: #213c48;
  --color-black-box-950: #012938;
  --color-otterly-brown: #834400;
  --color-otterly-brown-50: #fff2ea;
  --color-otterly-brown-100: #ffe6d4;
  --color-otterly-brown-200: #ffcca7;
  --color-otterly-brown-300: #f0b385;
  --color-otterly-brown-400: #d4915e;
  --color-otterly-brown-500: #b9753f;
  --color-otterly-brown-600: #9b5b24;
  --color-otterly-brown-700: #834400;
  --color-otterly-brown-800: #673400;
  --color-otterly-brown-900: #512700;
  --color-otterly-brown-950: #341700;
  --color-summer-s-end: #d59667;
  --color-summer-s-end-50: #fff4ed;
  --color-summer-s-end-100: #ffe9d9;
  --color-summer-s-end-200: #ffd0ae;
  --color-summer-s-end-300: #eeb890;
  --color-summer-s-end-400: #d59667;
  --color-summer-s-end-500: #b77a4c;
  --color-summer-s-end-600: #995f31;
  --color-summer-s-end-700: #7d481c;
  --color-summer-s-end-800: #64360e;
  --color-summer-s-end-900: #4f2805;
  --color-summer-s-end-950: #331701;
  --color-frozen-landscape: #b1e4fc;
  --color-frozen-landscape-50: #effaff;
  --color-frozen-landscape-100: #daf3ff;
  --color-frozen-landscape-200: #b1e4fc;
  --color-frozen-landscape-300: #a2cbdf;
  --color-frozen-landscape-400: #7dacc1;
  --color-frozen-landscape-500: #5f90a6;
  --color-frozen-landscape-600: #457489;
  --color-frozen-landscape-700: #315c6f;
  --color-frozen-landscape-800: #214858;
  --color-frozen-landscape-900: #163745;
  --color-frozen-landscape-950: #0a222d;
}