#970EAA Dark Orchid
rgb(151, 14, 170)
Color conversions
- HEX
- #970EAA
- RGB
- rgb(151, 14, 170)
- RGBA
- rgba(151, 14, 170, 1)
- HSL
- hsl(293, 85%, 36%)
- HSV / HSB
- hsv(293, 92%, 67%)
- CMYK
- cmyk(11%, 92%, 0%, 33%)
Wide-gamut spaces
- XYZ
- xyz(20.174, 9.797, 38.851)
- LAB
- lab(37.48 67.76 -49.66)
- LCH
- lch(37.48 84.01 323.77)
- OKLAB
- oklab(49.15% 0.1781 -0.1394)
- OKLCH
- oklch(49.15% 0.2261 321.95)
- Nearest name
- Dark Orchid
Shades, tints and tones
Color harmonies
The hue directly opposite on the color wheel. Maximum contrast, ideal for a single accent against a dominant brand color.
Neighbouring hues that share a temperature. The safest harmony for calm, cohesive interfaces.
Three hues evenly spaced 120 degrees apart. Vibrant and balanced — use one as dominant and the other two sparingly.
The complement split into two adjacent hues. Nearly the contrast of complementary with noticeably less tension.
Four hues at 90-degree intervals. A rich set for illustration, data visualisation, and category coding.
Two complementary pairs offset by 60 degrees. Gives two warm and two cool options in one system.
Similar colors
Opacity variations
#970eaa1a
#970eaa33
#970eaa4d
#970eaa66
#970eaa80
#970eaa99
#970eaab3
#970eaacc
#970eaae6
#970eaaff
Accessibility and contrast
On white
7.1:1
Body text AAA · Large text AA
On black
2.96:1
Body text Fail · Large text Fail
White-on-color contrast is 7.1:1.
Color blindness preview
Protanopia
No red cones — ~1% of men
Protanomaly
Reduced red sensitivity — ~1% of men
Deuteranopia
No green cones — ~1% of men
Deuteranomaly
Reduced green sensitivity — ~5% of men
Tritanopia
No blue cones — very rare
Tritanomaly
Reduced blue sensitivity — very rare
Achromatopsia
No color perception — ~1 in 30,000
Achromatomaly
Partial color perception — rare
Meaning, psychology and brand usage
Confident, contemporary, impossible to ignore
Magenta has no single wavelength — the brain constructs it — and that unusual quality is part of why it feels synthetic and current. It signals boldness and non-conformity without red's aggression.
Modernity, playfulness, and inclusivity in contemporary Western design; historically associated with fashion and print.
Named after the 1859 Battle of Magenta, the dye arrived alongside mauveine in the first wave of synthetic colours. It is one of the four process inks in CMYK printing.
Works as a high-impact accent or a brave primary in fashion, telecom, and culture. Needs generous white space; at scale it fatigues the eye quickly.
Common industries: Fashion, Telecom, Music, Culture, Beauty. Pairs well with deep indigo for depth, cream for softness, charcoal for editorial contrast.
Code exports
CSS
:root {
--color-dark-orchid: #970eaa;
--color-dark-orchid-rgb: 151 14 170;
--color-dark-orchid-hsl: 293 85% 36%;
--color-dark-orchid-oklch: 49.15% 0.2261 321.95;
}
.element {
color: #970eaa;
background-color: hsl(293, 85%, 36%);
border: 1px solid rgb(151 14 170 / 40%);
}SCSS
$dark-orchid: #970eaa;
$dark-orchid-light: #cb87d5;
$dark-orchid-dark: #4c0755;
.element {
color: $dark-orchid;
background: rgba($dark-orchid, 0.12);
&:hover {
color: darken($dark-orchid, 8%);
}
}LESS
@dark-orchid: #970eaa;
@dark-orchid-light: lighten(@dark-orchid, 12%);
@dark-orchid-dark: darken(@dark-orchid, 12%);
.element {
color: @dark-orchid;
background: fade(@dark-orchid, 12%);
}Tailwind CSS
/* Tailwind v4 — src/styles.css */
@theme {
--color-dark-orchid-50: #eacfee;
--color-dark-orchid-100: #e0b7e6;
--color-dark-orchid-200: #d59fdd;
--color-dark-orchid-300: #c16ecc;
--color-dark-orchid-400: #ac3ebb;
--color-dark-orchid-500: #970eaa;
--color-dark-orchid-600: #880d99;
--color-dark-orchid-700: #6a0a77;
--color-dark-orchid-800: #4c0755;
--color-dark-orchid-900: #2d0433;
}
/* Usage */
<div class="bg-dark-orchid-500 text-dark-orchid-50 ring-dark-orchid-600" />
/* Arbitrary value, no config needed */
<div class="bg-[#970eaa]" />Bootstrap
// Bootstrap 5 — _variables.scss (before importing bootstrap)
$dark-orchid: #970eaa;
$primary: $dark-orchid;
$theme-colors: map-merge($theme-colors, (
"dark-orchid": $dark-orchid
));
// Generates .text-dark-orchid, .bg-dark-orchid, .btn-dark-orchid
@import "bootstrap/scss/bootstrap";Flutter
import 'package:flutter/material.dart';
const Color darkOrchid = Color(0xFF970EAA);
// As a MaterialColor swatch
const MaterialColor darkOrchidSwatch = MaterialColor(0xFF970EAA, <int, Color>{
50: Color(0xFFEACFEE),
100: Color(0xFFE0B7E6),
200: Color(0xFFD59FDD),
300: Color(0xFFC16ECC),
400: Color(0xFFAC3EBB),
500: Color(0xFF970EAA),
600: Color(0xFF880D99),
700: Color(0xFF6A0A77),
800: Color(0xFF4C0755),
900: Color(0xFF2D0433),
});Swift / SwiftUI
import SwiftUI
extension Color {
/// #970eaa — Dark Orchid
static let darkOrchid = Color(
red: 0.5922,
green: 0.0549,
blue: 0.6667
)
}
// UIKit
extension UIColor {
static let darkOrchid = UIColor(
red: 0.5922,
green: 0.0549,
blue: 0.6667,
alpha: 1.0
)
}Android
<!-- res/values/colors.xml -->
<resources>
<color name="dark_orchid">#970EAA</color>
<color name="dark_orchid_translucent">#80970EAA</color>
</resources>
<!-- Jetpack Compose -->
val DarkOrchid = Color(0xFF970EAA)JavaScript
export const DARK_ORCHID = {
hex: "#970eaa",
rgb: [151, 14, 170],
hsl: [293, 85, 36],
oklch: "oklch(49.15% 0.2261 321.95)",
};JSON tokens
{
"$schema": "https://design-tokens.org/schema.json",
"dark-orchid": {
"$type": "color",
"$value": "#970eaa",
"$description": "Dark Orchid — generated by ColorVerse AI"
}
}