Gradient Page

#69EACB

#69EACB is the HEX color code for
Turquoise Blue
#69EACB

Turquoise Blue

Contrast
Light
Luminance
75%
Color Conversions
Formats for Turquoise Blue (#69EACB) in various color spaces.
#69EACB
105, 234, 203
166°, 75%, 66%
55%, 0%, 13%, 8%
0.856, 0.123, 175
--color-turquoise-blue: #69EACB;

Shades & Tints

#e9fcf7
#bcf5e8
#8fefd9
#63e9c9
#36e2ba
#1dc9a1
#169c7d
#107059
#0a4336
#031612
DarkestBaseLightest

Color Harmonies

Complementary

#69EACB
#e96786

Analogous

#67e98a
#69EACB
#67c7e9

Triadic

#69EACB
#cb67e9
#e9cb67

Split Complementary

#69EACB
#e967c7
#e98a67

UI Component Examples

See how #69EACB looks when applied to real interface components.

Interactive Elements
Surface & Accent
Pro Tip!

Use lighter tints for backgrounds to maintain readability while keeping brand identity.

Status Indicator
Active
# CSS Variables
Copy-paste these variables into your global CSS to use this palette instantly.
:root {
  /* Turquoise Blue Base */
  --color-primary: #69EACB;
  --color-primary-rgb: 105 234 203;
  --color-primary-hsl: 166 75% 66%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #e9fcf7;
  --color-primary-100: #bcf5e8;
  --color-primary-200: #8fefd9;
  --color-primary-300: #63e9c9;
  --color-primary-400: #36e2ba;
  --color-primary-500: #1dc9a1;
  --color-primary-600: #169c7d;
  --color-primary-700: #107059;
  --color-primary-800: #0a4336;
  --color-primary-900: #031612;
}

Want more?

We hope you enjoyed this color. Keep reading for more amazing colorful content for developers, designers and creators!
View our entire collection of UI gradientsView all our color names
#69EACB Hex Color | Turquoise Blue sl | UI Color Scheme Generator