Gradient Page

#DA70D6

#DA70D6 is the HEX color code for
Orchid
#DA70D6

Orchid

Contrast
Light
Luminance
61%
Color Conversions
Formats for Orchid (#DA70D6) in various color spaces.
#DA70D6
218, 112, 214
302°, 59%, 65%
0%, 49%, 2%, 15%
0.702, 0.181, 328.7
--color-orchid: #DA70D6;

Shades & Tints

#faebf9
#efc2ee
#e59ae2
#da71d7
#d049cb
#b62fb2
#8e258a
#651a63
#3d103b
#140514
DarkestBaseLightest

Color Harmonies

Complementary

#DA70D6
#71da75

Analogous

#a971da
#DA70D6
#da71a2

Triadic

#DA70D6
#d7da71
#71d7da

Split Complementary

#DA70D6
#a2da71
#71daa9

UI Component Examples

See how #DA70D6 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 {
  /* Orchid Base */
  --color-primary: #DA70D6;
  --color-primary-rgb: 218 112 214;
  --color-primary-hsl: 302 59% 65%;
  
  /* Foreground text color based on contrast */
  --color-primary-foreground: #000000;

  /* Shades */
  --color-primary-50:  #faebf9;
  --color-primary-100: #efc2ee;
  --color-primary-200: #e59ae2;
  --color-primary-300: #da71d7;
  --color-primary-400: #d049cb;
  --color-primary-500: #b62fb2;
  --color-primary-600: #8e258a;
  --color-primary-700: #651a63;
  --color-primary-800: #3d103b;
  --color-primary-900: #140514;
}

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
#DA70D6 Hex Color | Orchid sl | UI Color Scheme Generator