Gradient Page

#6B8BA2

#6B8BA2 is the HEX color code for
Bermuda Gray
#6B8BA2

Bermuda Gray

Contrast
Light
Luminance
52%
Color Conversions
Formats for Bermuda Gray (#6B8BA2) in various color spaces.
#6B8BA2
107, 139, 162
205°, 23%, 53%
34%, 14%, 0%, 36%
0.621, 0.05, 239.8
--color-bermuda-gray: #6B8BA2;

Shades & Tints

#eff3f5
#d0dae2
#b1c2ce
#91a9ba
#7291a7
#58778d
#455d6e
#31424e
#1d282f
#0a0d10
DarkestBaseLightest

Color Harmonies

Complementary

#6B8BA2
#a3836c

Analogous

#6ca39e
#6B8BA2
#6c70a3

Triadic

#6B8BA2
#a36c8c
#8ca36c

Split Complementary

#6B8BA2
#a36c70
#a39e6c

UI Component Examples

See how #6B8BA2 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 {
  /* Bermuda Gray Base */
  --color-primary: #6B8BA2;
  --color-primary-rgb: 107 139 162;
  --color-primary-hsl: 205 23% 53%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #eff3f5;
  --color-primary-100: #d0dae2;
  --color-primary-200: #b1c2ce;
  --color-primary-300: #91a9ba;
  --color-primary-400: #7291a7;
  --color-primary-500: #58778d;
  --color-primary-600: #455d6e;
  --color-primary-700: #31424e;
  --color-primary-800: #1d282f;
  --color-primary-900: #0a0d10;
}

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
#6B8BA2 Hex Color | Bermuda Gray sl | UI Color Scheme Generator