Skip to main content

Arctic Aurora

4-color mesh gradient

Open in Studio Visualize

Arctic Aurora is a 4-color CSS mesh gradient built from #0EA5E9, #06B6D4, #A5F3FC, and #ECFEFF. Its hues sit in the blue and teal ranges, and reads as cool. Dark text (#111827) on it keeps at least 6.40:1 at its weakest point — enough for WCAG AA body text.

#arctic #cool #calm

UI Preview

See how this gradient looks in a real interface

🎨

Welcome Back

Your creative workspace awaits

Continue

Shade scales

Each color as a 50–950 ramp, like Tailwind's built-in palettes — ready for a design system. The ringed step is the original color, exactly.

#0ea5e9

#06b6d4

#a5f3fc

#ecfeff

@theme {
  --color-arctic-aurora-1-50: #F0F9FF;
  --color-arctic-aurora-1-100: #D6EFFF;
  --color-arctic-aurora-1-200: #ADDEFF;
  --color-arctic-aurora-1-300: #6EC7FD;
  --color-arctic-aurora-1-400: #0EA5E9;
  --color-arctic-aurora-1-500: #008CC7;
  --color-arctic-aurora-1-600: #0075A7;
  --color-arctic-aurora-1-700: #005E88;
  --color-arctic-aurora-1-800: #004C6E;
  --color-arctic-aurora-1-900: #003C59;
  --color-arctic-aurora-1-950: #00273C;
}

@theme {
  --color-arctic-aurora-2-50: #ECFBFF;
  --color-arctic-aurora-2-100: #D3F2FB;
  --color-arctic-aurora-2-200: #ABE5F4;
  --color-arctic-aurora-2-300: #70D2EA;
  --color-arctic-aurora-2-400: #06B6D4;
  --color-arctic-aurora-2-500: #009AB4;
  --color-arctic-aurora-2-600: #008096;
  --color-arctic-aurora-2-700: #006779;
  --color-arctic-aurora-2-800: #005261;
  --color-arctic-aurora-2-900: #00414D;
  --color-arctic-aurora-2-950: #002932;
}

@theme {
  --color-arctic-aurora-3-50: #E6FCFF;
  --color-arctic-aurora-3-100: #A5F3FC;
  --color-arctic-aurora-3-200: #36ECFE;
  --color-arctic-aurora-3-300: #00D5E6;
  --color-arctic-aurora-3-400: #00B4C2;
  --color-arctic-aurora-3-500: #0098A5;
  --color-arctic-aurora-3-600: #007F89;
  --color-arctic-aurora-3-700: #00666F;
  --color-arctic-aurora-3-800: #005259;
  --color-arctic-aurora-3-900: #004147;
  --color-arctic-aurora-3-950: #002A2E;
}

@theme {
  --color-arctic-aurora-4-50: #ECFEFF;
  --color-arctic-aurora-4-100: #EBEFF0;
  --color-arctic-aurora-4-200: #D7DFDF;
  --color-arctic-aurora-4-300: #BCC8C8;
  --color-arctic-aurora-4-400: #9AA9AA;
  --color-arctic-aurora-4-500: #7F8F90;
  --color-arctic-aurora-4-600: #687778;
  --color-arctic-aurora-4-700: #526061;
  --color-arctic-aurora-4-800: #414C4D;
  --color-arctic-aurora-4-900: #323B3C;
  --color-arctic-aurora-4-950: #1F2526;
}

Light & dark theme

This palette as Material 3 color roles for a real interface, in light and dark mode. Every color comes with the text color that goes on it, and every pair's contrast is measured.

Contrast checker

Text color (rows) on background (columns), scored against WCAG 2.1. 0 of 12 palette combinations are readable as body text. White and near-black text are included for comparison.

WCAG contrast ratio for each text and background color combination
Text ↓ / Bg → #0EA5E9#06B6D4#A5F3FC#ECFEFF
#0EA5E9
Same color
1.1Fail
2.2Fail
2.7Fail
#06B6D4
1.1Fail
Same color
1.9Fail
2.3Fail
#A5F3FC
2.2Fail
1.9Fail
Same color
1.2Fail
#ECFEFF
2.7Fail
2.3Fail
1.2Fail
Same color
White
2.8Fail
2.4Fail
1.2Fail
1.0Fail
Near-black
6.3AA
7.2AAA
14.0AAA
16.8AAA

AAA ≥ 7:1 · AA ≥ 4.5:1 body text· AA18 ≥ 3:1 large text (18pt, or 14pt bold) only

Text that works on each color

  • Near-black on #0EA5E9 · 6.3:1
  • Near-black on #06B6D4 · 7.2:1
  • Near-black on #A5F3FC · 14.0:1
  • Near-black on #ECFEFF · 16.8:1
Suggested fixes for 12 failing pairs

The nearest shade of the text color that passes AA (4.5:1), keeping its hue. Click one to copy it.

Color blindness check

About 1 in 12 men and 1 in 200 women see color differently. Simulated with the Machado (2009) model.

Typical
Deuteranopia

No green cones — the most common form. Pale Turquoise, #A5F3FC and Azure, #ECFEFF become hard to tell apart — don't rely on color alone to separate them.

What are the HEX, RGB, and HSL values for Arctic Aurora?

Every color in this 4-color set, with its contrast ratio against white and black.

Color values for Arctic Aurora: hex, RGB, HSL, and WCAG contrast ratios against white and black.
ColorNameHEXRGBHSLOn whiteOn black
#0EA5E9Sky#0EA5E914, 165, 233199°, 89%, 48%2.77:17.58:1
#06B6D4Cyan Blue#06B6D46, 182, 212189°, 94%, 43%2.43:18.65:1
#A5F3FCPale Turquoise#A5F3FC165, 243, 252186°, 94%, 82%1.25:116.83:1
#ECFEFFAzure#ECFEFF236, 254, 255183°, 100%, 96%1.04:120.19:1

Related mesh gradients

Others sharing the same hues and tone

All mesh gradients →