Hydra to Breaking the Ice color palette
006A94Hydra004A68Raging Thunderstorm00A8DDThalassophile84D0FFClear Sky002837Black BoxC0E9FFBreaking the Ice
About this palette
Hydra to Breaking the Ice is a 6-color cool, monochromatic palette: #006A94 (Hydra), #004A68 (Raging Thunderstorm), #00A8DD (Thalassophile), #84D0FF (Clear Sky), #002837 (Black Box), #C0E9FF (Breaking the Ice). It mixes blue tones and feels cool overall. The strongest text pairing is #002837 on #C0E9FF with a contrast ratio of 12.03:1, and 6 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Hydra | rgb(0, 106, 148) | hsl(197, 100%, 29%) | |
| Raging Thunderstorm | rgb(0, 74, 104) | hsl(197, 100%, 20%) | |
| Thalassophile | rgb(0, 168, 221) | hsl(194, 100%, 43%) | |
| Clear Sky | rgb(132, 208, 255) | hsl(203, 100%, 76%) | |
| Black Box | rgb(0, 40, 55) | hsl(196, 100%, 11%) | |
| Breaking the Ice | rgb(192, 233, 255) | hsl(201, 100%, 88%) |
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.
- Aa12.03:1 #002837 on #C0E9FF
- Aa12.03:1 #C0E9FF on #002837
- Aa9.16:1 #84D0FF on #002837
- Aa9.16:1 #002837 on #84D0FF
- Aa7.50:1 #004A68 on #C0E9FF
- Aa7.50:1 #C0E9FF on #004A68
- Aa5.71:1 #004A68 on #84D0FF
- Aa5.71:1 #84D0FF on #004A68
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Hydra to Breaking the Ice — https://swatchly.xyz/palette/006a94-004a68-00a8dd-84d0ff-002837-c0e9ff */
:root {
--hydra: #006a94;
--raging-thunderstorm: #004a68;
--thalassophile: #00a8dd;
--clear-sky: #84d0ff;
--black-box: #002837;
--breaking-the-ice: #c0e9ff;
}
Tailwind CSS v4
/* Hydra to Breaking the Ice — https://swatchly.xyz/palette/006a94-004a68-00a8dd-84d0ff-002837-c0e9ff */
@theme {
--color-hydra: #006a94;
--color-hydra-50: #ebf7ff;
--color-hydra-100: #d2eeff;
--color-hydra-200: #a2ddff;
--color-hydra-300: #7ec5ee;
--color-hydra-400: #54a4d0;
--color-hydra-500: #3087b2;
--color-hydra-600: #006a94;
--color-hydra-700: #005476;
--color-hydra-800: #00425e;
--color-hydra-900: #00334a;
--color-hydra-950: #002030;
--color-raging-thunderstorm: #004a68;
--color-raging-thunderstorm-50: #ebf7ff;
--color-raging-thunderstorm-100: #d6f0ff;
--color-raging-thunderstorm-200: #b1dff9;
--color-raging-thunderstorm-300: #95c9e7;
--color-raging-thunderstorm-400: #70abcb;
--color-raging-thunderstorm-500: #528fb0;
--color-raging-thunderstorm-600: #387494;
--color-raging-thunderstorm-700: #245d7a;
--color-raging-thunderstorm-800: #004a68;
--color-raging-thunderstorm-900: #0b394e;
--color-raging-thunderstorm-950: #032333;
--color-thalassophile: #00a8dd;
--color-thalassophile-50: #e4f6ff;
--color-thalassophile-100: #caedff;
--color-thalassophile-200: #97ddff;
--color-thalassophile-300: #5bc8f8;
--color-thalassophile-400: #00a8dd;
--color-thalassophile-500: #008cb9;
--color-thalassophile-600: #007196;
--color-thalassophile-700: #005a78;
--color-thalassophile-800: #00475f;
--color-thalassophile-900: #00374b;
--color-thalassophile-950: #002331;
--color-clear-sky: #84d0ff;
--color-clear-sky-50: #f0f9ff;
--color-clear-sky-100: #def2ff;
--color-clear-sky-200: #b7e3ff;
--color-clear-sky-300: #84d0ff;
--color-clear-sky-400: #68afda;
--color-clear-sky-500: #4692be;
--color-clear-sky-600: #2876a0;
--color-clear-sky-700: #0f5d84;
--color-clear-sky-800: #00496a;
--color-clear-sky-900: #003752;
--color-clear-sky-950: #002235;
--color-black-box: #002837;
--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: #4e7485;
--color-black-box-700: #3b5d6d;
--color-black-box-800: #2c4a58;
--color-black-box-900: #203b47;
--color-black-box-950: #002837;
--color-breaking-the-ice: #c0e9ff;
--color-breaking-the-ice-50: #d9f2ff;
--color-breaking-the-ice-100: #c0e9ff;
--color-breaking-the-ice-200: #b6d5e6;
--color-breaking-the-ice-300: #9ec1d4;
--color-breaking-the-ice-400: #7ea3b7;
--color-breaking-the-ice-500: #63899d;
--color-breaking-the-ice-600: #4b7083;
--color-breaking-the-ice-700: #395a6c;
--color-breaking-the-ice-800: #294756;
--color-breaking-the-ice-900: #1d3643;
--color-breaking-the-ice-950: #10222b;
}
Similar palettes
- 00304200536A007A9B3A9DC18FD3F8DAF1FFNordic Noir to Water
- 002A41B3E3FF004E761DA9E7007CBCEternal Darkness to Star of Life
- 051D29004E6C306A8F619BBF3CBDF8A2DAFFOxford by Night to Droplet
- 0C1A201F415019698D41A7D397CCE2F0FAFFBlack Stallion to Cotton Ball
- 9DDFFF006D95003147009FD5Droplet to Blue Burst
- 729CC12C699B07203E9FCBFF00426CWindstorm to Aegean Blue
- C2E7FF81A7F71CA1E4126AC1004D5100312FSalty Ice to Elite Teal
- 47BEE61682AC064F67002E3FA6E0FFCaribbean Blue to Droplet