Start generating

Teal Me No Lies to Beyond the Sea color palette

00ACB7Teal Me No Lies0E2D40Oceanic NoirA2C7FFNight Snow4E6BBBLoch Ness8EEEFBShallow Water005881Beyond the Sea
Open in generator Export PNG, PDF, ASE…

About this palette

Teal Me No Lies to Beyond the Sea is a 6-color cool palette: #00ACB7 (Teal Me No Lies), #0E2D40 (Oceanic Noir), #A2C7FF (Night Snow), #4E6BBB (Loch Ness), #8EEEFB (Shallow Water), #005881 (Beyond the Sea). It mixes turquoise, blue tones and feels cool overall. The strongest text pairing is #0E2D40 on #8EEEFB with a contrast ratio of 10.74:1, and 4 of its 15 color pairs pass WCAG AA for normal text.

Color codes

ColorHEXRGBHSL
Teal Me No Liesrgb(0, 172, 183)hsl(184, 100%, 36%)
Oceanic Noirrgb(14, 45, 64)hsl(203, 64%, 15%)
Night Snowrgb(162, 199, 255)hsl(216, 100%, 82%)
Loch Nessrgb(78, 107, 187)hsl(224, 44%, 52%)
Shallow Waterrgb(142, 238, 251)hsl(187, 93%, 77%)
Beyond the Seargb(0, 88, 129)hsl(199, 100%, 25%)

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.74:1 Very good#0E2D40 on #8EEEFB
  • Aa10.74:1 Very good#8EEEFB on #0E2D40
  • Aa8.28:1 Very good#0E2D40 on #A2C7FF
  • Aa8.28:1 Very good#A2C7FF on #0E2D40
  • Aa5.81:1 Good#8EEEFB on #005881
  • Aa5.81:1 Good#005881 on #8EEEFB
  • Aa5.17:1 Good#00ACB7 on #0E2D40
  • Aa5.17:1 Good#0E2D40 on #00ACB7

Color blindness preview

  • Protanopia
  • Deuteranopia
  • Tritanopia
  • Achromatopsia
  • Dog vision

CSS variables

/* Teal Me No Lies to Beyond the Sea — https://swatchly.xyz/palette/00acb7-0e2d40-a2c7ff-4e6bbb-8eeefb-005881 */
:root {
  --teal-me-no-lies: #00acb7;
  --oceanic-noir: #0e2d40;
  --night-snow: #a2c7ff;
  --loch-ness: #4e6bbb;
  --shallow-water: #8eeefb;
  --beyond-the-sea: #005881;
}

Tailwind CSS v4

/* Teal Me No Lies to Beyond the Sea — https://swatchly.xyz/palette/00acb7-0e2d40-a2c7ff-4e6bbb-8eeefb-005881 */
@theme {
  --color-teal-me-no-lies: #00acb7;
  --color-teal-me-no-lies-50: #cffbff;
  --color-teal-me-no-lies-100: #a9f5fc;
  --color-teal-me-no-lies-200: #85e2eb;
  --color-teal-me-no-lies-300: #5bccd5;
  --color-teal-me-no-lies-400: #00acb7;
  --color-teal-me-no-lies-500: #008f99;
  --color-teal-me-no-lies-600: #00747c;
  --color-teal-me-no-lies-700: #005c63;
  --color-teal-me-no-lies-800: #00494e;
  --color-teal-me-no-lies-900: #00393d;
  --color-teal-me-no-lies-950: #002528;
  --color-oceanic-noir: #0e2d40;
  --color-oceanic-noir-50: #ecf7ff;
  --color-oceanic-noir-100: #d9effe;
  --color-oceanic-noir-200: #c2dcee;
  --color-oceanic-noir-300: #a8c5da;
  --color-oceanic-noir-400: #84a4bb;
  --color-oceanic-noir-500: #67879e;
  --color-oceanic-noir-600: #4c6b80;
  --color-oceanic-noir-700: #375265;
  --color-oceanic-noir-800: #263e4d;
  --color-oceanic-noir-900: #0e2d40;
  --color-oceanic-noir-950: #0d1a23;
  --color-night-snow: #a2c7ff;
  --color-night-snow-50: #f3f8ff;
  --color-night-snow-100: #e4efff;
  --color-night-snow-200: #c6ddff;
  --color-night-snow-300: #a2c7ff;
  --color-night-snow-400: #84a6da;
  --color-night-snow-500: #678abe;
  --color-night-snow-600: #4e6ea0;
  --color-night-snow-700: #395784;
  --color-night-snow-800: #29436a;
  --color-night-snow-900: #1d3354;
  --color-night-snow-950: #0f1f37;
  --color-loch-ness: #4e6bbb;
  --color-loch-ness-50: #f1f5ff;
  --color-loch-ness-100: #e4ecff;
  --color-loch-ness-200: #c9d9ff;
  --color-loch-ness-300: #a9c2ff;
  --color-loch-ness-400: #82a1f2;
  --color-loch-ness-500: #6786d8;
  --color-loch-ness-600: #4e6bbb;
  --color-loch-ness-700: #3a539c;
  --color-loch-ness-800: #2a407f;
  --color-loch-ness-900: #1e3066;
  --color-loch-ness-950: #101d44;
  --color-shallow-water: #8eeefb;
  --color-shallow-water-50: #eafcff;
  --color-shallow-water-100: #ccf9ff;
  --color-shallow-water-200: #8eeefb;
  --color-shallow-water-300: #86d3de;
  --color-shallow-water-400: #59b4c0;
  --color-shallow-water-500: #3398a4;
  --color-shallow-water-600: #027c88;
  --color-shallow-water-700: #00626c;
  --color-shallow-water-800: #004c54;
  --color-shallow-water-900: #003a41;
  --color-shallow-water-950: #002529;
  --color-beyond-the-sea: #005881;
  --color-beyond-the-sea-50: #ecf7ff;
  --color-beyond-the-sea-100: #d8efff;
  --color-beyond-the-sea-200: #aedeff;
  --color-beyond-the-sea-300: #8cc8f0;
  --color-beyond-the-sea-400: #64a8d4;
  --color-beyond-the-sea-500: #458cb7;
  --color-beyond-the-sea-600: #297099;
  --color-beyond-the-sea-700: #005881;
  --color-beyond-the-sea-800: #034565;
  --color-beyond-the-sea-900: #003550;
  --color-beyond-the-sea-950: #002133;
}

Similar palettes