Gradient Page

#F95A61

#F95A61 is the HEX color code for
Carnation
#F95A61

Carnation

Contrast
Light
Luminance
54%
Color Conversions
Formats for Carnation (#F95A61) in various color spaces.
#F95A61
249, 90, 97
357°, 93%, 66%
0%, 64%, 61%, 2%
0.68, 0.194, 21.4
--color-carnation: #F95A61;

Shades & Tints

#fee6e8
#fcb5b9
#fb848a
#f9535b
#f7222c
#dd0813
#ac060f
#7b040a
#4a0306
#190102
DarkestBaseLightest

Color Harmonies

Complementary

#F95A61
#58f9f1

Analogous

#f958b0
#F95A61
#f9a058

Triadic

#F95A61
#60f958
#5860f9

Split Complementary

#F95A61
#58f9a0
#58b0f9

UI Component Examples

See how #F95A61 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: #F95A61;
  --color-primary-rgb: 249 90 97;
  --color-primary-hsl: 357 93% 66%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #fee6e8;
  --color-primary-100: #fcb5b9;
  --color-primary-200: #fb848a;
  --color-primary-300: #f9535b;
  --color-primary-400: #f7222c;
  --color-primary-500: #dd0813;
  --color-primary-600: #ac060f;
  --color-primary-700: #7b040a;
  --color-primary-800: #4a0306;
  --color-primary-900: #190102;
}

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