Gradient Page

#F77062

#F77062 is the HEX color code for
Carnation
#F77062

Carnation

Contrast
Light
Luminance
59%
Color Conversions
Formats for Carnation (#F77062) in various color spaces.
#F77062
247, 112, 98
6°, 90%, 68%
0%, 55%, 60%, 3%
0.705, 0.168, 28.1
--color-carnation: #F77062;

Shades & Tints

#fee9e7
#fbbdb6
#f99186
#f66555
#f43a25
#da200b
#aa1909
#791206
#490b04
#180401
DarkestBaseLightest

Color Harmonies

Complementary

#F77062
#64e8f7

Analogous

#f7649f
#F77062
#f7bc64

Triadic

#F77062
#64f773
#7364f7

Split Complementary

#F77062
#64f7bc
#649ff7

UI Component Examples

See how #F77062 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 {
  /* Carnation Base */
  --color-primary: #F77062;
  --color-primary-rgb: 247 112 98;
  --color-primary-hsl: 6 90% 68%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #fee9e7;
  --color-primary-100: #fbbdb6;
  --color-primary-200: #f99186;
  --color-primary-300: #f66555;
  --color-primary-400: #f43a25;
  --color-primary-500: #da200b;
  --color-primary-600: #aa1909;
  --color-primary-700: #791206;
  --color-primary-800: #490b04;
  --color-primary-900: #180401;
}

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
#F77062 Hex Color | Carnation sl | UI Color Scheme Generator