Quick-Freeze to Stormy Oceans color palette

C0DCDDQuick-Freeze 1E2628Black Pearl 495C59Woodland Night A2AEBDLost in Time 6F8591Stormy Oceans

About this palette

Quick-Freeze to Stormy Oceans is a 5-color muted palette: #C0DCDD (Quick-Freeze), #1E2628 (Black Pearl), #495C59 (Woodland Night), #A2AEBD (Lost in Time), #6F8591 (Stormy Oceans). It mixes gray tones and feels balanced overall. The strongest text pairing is #C0DCDD on #1E2628 with a contrast ratio of 10.65:1, and 3 of its 10 color pairs pass WCAG AA for normal text.

Color codes

Color	RGB	HSL
Quick-Freeze	rgb(192, 220, 221)	hsl(182, 30%, 81%)
Black Pearl	rgb(30, 38, 40)	hsl(192, 14%, 14%)
Woodland Night	rgb(73, 92, 89)	hsl(171, 12%, 32%)
Lost in Time	rgb(162, 174, 189)	hsl(213, 17%, 69%)
Stormy Oceans	rgb(111, 133, 145)	hsl(201, 13%, 50%)

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.65:1 Very good#C0DCDD on #1E2628
Aa10.65:1 Very good#1E2628 on #C0DCDD
Aa6.84:1 Good#1E2628 on #A2AEBD
Aa6.84:1 Good#A2AEBD on #1E2628
Aa4.91:1 Good#C0DCDD on #495C59
Aa4.91:1 Good#495C59 on #C0DCDD
Aa3.99:1 Poor#1E2628 on #6F8591
Aa3.99:1 Poor#6F8591 on #1E2628

Color blindness preview

CSS variables

/* Quick-Freeze to Stormy Oceans — https://swatchly.xyz/palette/c0dcdd-1e2628-495c59-a2aebd-6f8591 */
:root {
  --quick-freeze: #c0dcdd;
  --black-pearl: #1e2628;
  --woodland-night: #495c59;
  --lost-in-time: #a2aebd;
  --stormy-oceans: #6f8591;
}

Tailwind CSS v4

/* Quick-Freeze to Stormy Oceans — https://swatchly.xyz/palette/c0dcdd-1e2628-495c59-a2aebd-6f8591 */
@theme {
  --color-quick-freeze: #c0dcdd;
  --color-quick-freeze-50: #e8f8f8;
  --color-quick-freeze-100: #dceeee;
  --color-quick-freeze-200: #c0dcdd;
  --color-quick-freeze-300: #adc5c6;
  --color-quick-freeze-400: #8ca6a7;
  --color-quick-freeze-500: #718b8c;
  --color-quick-freeze-600: #587172;
  --color-quick-freeze-700: #435a5b;
  --color-quick-freeze-800: #334747;
  --color-quick-freeze-900: #263637;
  --color-quick-freeze-950: #162222;
  --color-black-pearl: #1e2628;
  --color-black-pearl-50: #f0f6f8;
  --color-black-pearl-100: #e6ecee;
  --color-black-pearl-200: #d1d9db;
  --color-black-pearl-300: #bac3c5;
  --color-black-pearl-400: #9aa3a6;
  --color-black-pearl-500: #80898c;
  --color-black-pearl-600: #677072;
  --color-black-pearl-700: #525a5c;
  --color-black-pearl-800: #40484a;
  --color-black-pearl-900: #32393a;
  --color-black-pearl-950: #1e2628;
  --color-woodland-night: #495c59;
  --color-woodland-night-50: #ecf8f6;
  --color-woodland-night-100: #e1efec;
  --color-woodland-night-200: #ccdcd9;
  --color-woodland-night-300: #b4c6c3;
  --color-woodland-night-400: #94a8a4;
  --color-woodland-night-500: #798d89;
  --color-woodland-night-600: #5f726f;
  --color-woodland-night-700: #495c59;
  --color-woodland-night-800: #384845;
  --color-woodland-night-900: #2a3735;
  --color-woodland-night-950: #192221;
  --color-lost-in-time: #a2aebd;
  --color-lost-in-time-50: #f5faff;
  --color-lost-in-time-100: #ebf2fb;
  --color-lost-in-time-200: #d8e0eb;
  --color-lost-in-time-300: #c2ccd8;
  --color-lost-in-time-400: #a2aebd;
  --color-lost-in-time-500: #85909f;
  --color-lost-in-time-600: #697482;
  --color-lost-in-time-700: #515b68;
  --color-lost-in-time-800: #3e4651;
  --color-lost-in-time-900: #2e353e;
  --color-lost-in-time-950: #1b2026;
  --color-stormy-oceans: #6f8591;
  --color-stormy-oceans-50: #e9f7fe;
  --color-stormy-oceans-100: #ddecf4;
  --color-stormy-oceans-200: #c6d8e2;
  --color-stormy-oceans-300: #adc1cc;
  --color-stormy-oceans-400: #8ba1ad;
  --color-stormy-oceans-500: #6f8591;
  --color-stormy-oceans-600: #576b77;
  --color-stormy-oceans-700: #435560;
  --color-stormy-oceans-800: #32434c;
  --color-stormy-oceans-900: #26343b;
  --color-stormy-oceans-950: #162026;
}