Oxford by Night to Droplet color palette
051D29Oxford by Night004E6CSeafarer306A8FChill of the Night619BBFLake Lucerne3CBDF8MegamanA2DAFFDroplet
About this palette
Oxford by Night to Droplet is a 6-color cool, monochromatic, gradient palette: #051D29 (Oxford by Night), #004E6C (Seafarer), #306A8F (Chill of the Night), #619BBF (Lake Lucerne), #3CBDF8 (Megaman), #A2DAFF (Droplet). It mixes blue tones and feels cool overall. The strongest text pairing is #051D29 on #A2DAFF with a contrast ratio of 11.54:1, and 4 of its 15 color pairs pass WCAG AA for normal text.
Color codes
| Color | HEX | RGB | HSL |
|---|---|---|---|
| Oxford by Night | rgb(5, 29, 41) | hsl(200, 78%, 9%) | |
| Seafarer | rgb(0, 78, 108) | hsl(197, 100%, 21%) | |
| Chill of the Night | rgb(48, 106, 143) | hsl(203, 50%, 37%) | |
| Lake Lucerne | rgb(97, 155, 191) | hsl(203, 42%, 56%) | |
| Megaman | rgb(60, 189, 248) | hsl(199, 93%, 60%) | |
| Droplet | rgb(162, 218, 255) | hsl(204, 100%, 82%) |
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.54:1 #051D29 on #A2DAFF
- Aa11.54:1 #A2DAFF on #051D29
- Aa8.09:1 #051D29 on #3CBDF8
- Aa8.09:1 #3CBDF8 on #051D29
- Aa6.07:1 #004E6C on #A2DAFF
- Aa6.07:1 #A2DAFF on #004E6C
- Aa5.72:1 #051D29 on #619BBF
- Aa5.72:1 #619BBF on #051D29
Color blindness preview
- Protanopia
- Deuteranopia
- Tritanopia
- Achromatopsia
- Dog vision
CSS variables
/* Oxford by Night to Droplet — https://swatchly.xyz/palette/051d29-004e6c-306a8f-619bbf-3cbdf8-a2daff */
:root {
--oxford-by-night: #051d29;
--seafarer: #004e6c;
--chill-of-the-night: #306a8f;
--lake-lucerne: #619bbf;
--megaman: #3cbdf8;
--droplet: #a2daff;
}
Tailwind CSS v4
/* Oxford by Night to Droplet — https://swatchly.xyz/palette/051d29-004e6c-306a8f-619bbf-3cbdf8-a2daff */
@theme {
--color-oxford-by-night: #051d29;
--color-oxford-by-night-50: #ebf7ff;
--color-oxford-by-night-100: #ddeef9;
--color-oxford-by-night-200: #c6dbe7;
--color-oxford-by-night-300: #adc5d3;
--color-oxford-by-night-400: #8ca6b5;
--color-oxford-by-night-500: #6f8999;
--color-oxford-by-night-600: #556e7c;
--color-oxford-by-night-700: #3f5663;
--color-oxford-by-night-800: #2e424d;
--color-oxford-by-night-900: #21313a;
--color-oxford-by-night-950: #051d29;
--color-seafarer: #004e6c;
--color-seafarer-50: #eaf7ff;
--color-seafarer-100: #d5f0ff;
--color-seafarer-200: #b0dffa;
--color-seafarer-300: #94cae8;
--color-seafarer-400: #70accd;
--color-seafarer-500: #5292b2;
--color-seafarer-600: #387797;
--color-seafarer-700: #24617e;
--color-seafarer-800: #004e6c;
--color-seafarer-900: #0a3c52;
--color-seafarer-950: #022636;
--color-chill-of-the-night: #306a8f;
--color-chill-of-the-night-50: #ecf7ff;
--color-chill-of-the-night-100: #d6eeff;
--color-chill-of-the-night-200: #afdbfb;
--color-chill-of-the-night-300: #91c4e7;
--color-chill-of-the-night-400: #6ba3ca;
--color-chill-of-the-night-500: #4d86ad;
--color-chill-of-the-night-600: #306a8f;
--color-chill-of-the-night-700: #215474;
--color-chill-of-the-night-800: #14425e;
--color-chill-of-the-night-900: #0b334a;
--color-chill-of-the-night-950: #042030;
--color-lake-lucerne: #619bbf;
--color-lake-lucerne-50: #f0f9ff;
--color-lake-lucerne-100: #e1f3ff;
--color-lake-lucerne-200: #bde5ff;
--color-lake-lucerne-300: #a2d1f0;
--color-lake-lucerne-400: #7eb4d7;
--color-lake-lucerne-500: #619bbf;
--color-lake-lucerne-600: #447da0;
--color-lake-lucerne-700: #2d6483;
--color-lake-lucerne-800: #1c4d69;
--color-lake-lucerne-900: #0f3b52;
--color-lake-lucerne-950: #052435;
--color-megaman: #3cbdf8;
--color-megaman-50: #f5fbff;
--color-megaman-100: #e5f5ff;
--color-megaman-200: #c0e8ff;
--color-megaman-300: #8fd7ff;
--color-megaman-400: #3cbdf8;
--color-megaman-500: #009ed6;
--color-megaman-600: #007ead;
--color-megaman-700: #006489;
--color-megaman-800: #004d6b;
--color-megaman-900: #003a52;
--color-megaman-950: #002333;
--color-droplet: #a2daff;
--color-droplet-50: #e4f4ff;
--color-droplet-100: #ceebff;
--color-droplet-200: #a2daff;
--color-droplet-300: #94c3e3;
--color-droplet-400: #71a5c7;
--color-droplet-500: #558aad;
--color-droplet-600: #3c7091;
--color-droplet-700: #295a77;
--color-droplet-800: #1b4761;
--color-droplet-900: #11374c;
--color-droplet-950: #072232;
}
Similar palettes
- 006A94004A6800A8DD84D0FF002837C0E9FFHydra to Breaking the Ice
- 0C1A201F415019698D41A7D397CCE2F0FAFFBlack Stallion to Cotton Ball
- 729CC12C699B07203E9FCBFF00426CWindstorm to Aegean Blue
- A2E2ED7EC7CE73A2A7007684204C53002023Blizzard Blue to Black Stallion
- AFE3E733BAE5496BA40052550B262BOpal to Sunken Ship
- 47BEE61682AC064F67002E3FA6E0FFCaribbean Blue to Droplet
- 00304200536A007A9B3A9DC18FD3F8DAF1FFNordic Noir to Water
- E4F5FF6DC4FD5C91B5005A7B132530Cotton Boll to Dark