#702ECC

Accessibility

AAA

7.11:1

Vs white / black

7.11:1 · 2.95:1

Sources

Library color

Codes

Formats

HEX

#702ecc

RGB

rgb(112, 46, 204)

RGBA

rgba(112, 46, 204, 1)

HSL

hsl(265, 63%, 49%)

HSLA

hsla(265, 63%, 49%, 1)

HSV

hsv(265, 77%, 80%)

LAB

lab(37.4% 59.86 -70.07)

LCH

lch(37.4% 92.16 310.51)

OKLAB

oklab(0.4876 0.0971 -0.2008)

OKLCH

oklch(0.4876 0.223 295.81)

XYZ

xyz(18.56, 9.76, 58.02)

CMYK

cmyk(45%, 77%, 0%, 20%)

CSS

color: #702ecc;

CSS variable

--color-702ecc: #702ecc;

SCSS

$color-702ecc: #702ecc;

JavaScript

const color = "#702ecc";

TypeScript

const color: string = "#702ecc";

React

style={{ backgroundColor: "#702ecc" }}

JSON

{ "hex": "#702ecc", "rgb": { "r": 112, "g": 46, "b": 204 }, "oklch": "oklch(0.4876 0.223 295.81)" }

Export

Developer code

css

:root {
  --#702ecc-1: #702ecc;
}

Design systems

Nearest official tokens

An arbitrary HEX is not an official Tailwind, Material, or Bootstrap color. Distance is CIEDE2000.

Nearest Tailwind color

violet-700

Similar · ΔE 1.81 · #6D28D9

Nearest CSS named color

BlueViolet

Noticeably different · ΔE 4.95 · #8A2BE2

Nearest Material color

deep-purple-500

Noticeably different · ΔE 3.59 · #673AB7

Nearest Bootstrap color

secondary

Very different · ΔE 19.46 · #6C757D

OKLCH

Perceptual 50–950 scale

Generated in OKLCH from this hex. Not an official Tailwind scale unless the hex itself is a Tailwind token.

50fde2ff 100f0d3ff 200dfbbff 300ca9eff 400b17bff 500965dfa 6007d4cd4 700653bad 8004d2a88 900371a65 950220447

Palette

Tints & shades

Full scale from light tints through the base color into deep shades

f3eefb e7dcf7 dbcbf2 cfb9ee c3a8ea b897e6 ac85e1 a074dd 9462d9 8851d5 7c3fd0 702ecc 672abb 5d26aa 542399 4b1f88 411b77 381766 2f1355 250f44 1c0c33 130822 090411

Palette

Tints

Mixed toward white — soft backgrounds and highlights

f3eefb e7dcf7 dbcbf2 cfb9ee c3a8ea b897e6 ac85e1 a074dd 9462d9 8851d5 7c3fd0

Palette

Shades

Mixed toward black — depth, text, and emphasis

672abb 5d26aa 542399 4b1f88 411b77 381766 2f1355 250f44 1c0c33 130822 090411

Palette

Tones

Mixed toward neutral grey — muted UI surfaces

7135c6 733cbf 7443b9 7549b3 7750ac 7857a6 795ea0 7b6599 7c6c93 7d728d 7f7986

Harmony

Complementary

Opposite on the color wheel for contrast

#702ECCStop 1 #8ACC2EStop 2

Harmony

Analogous

Neighbors that sit comfortably together

#2E3BCCStop 1 #702ECCStop 2 #BF2ECCStop 3

Harmony

Triadic

Evenly spaced triad for vibrant sets

#702ECCStop 1 #CC702EStop 2 #2ECC70Stop 3

Harmony

Split complementary

Base plus two accents beside the complement

#702ECCStop 1 #CCBF2EStop 2 #3BCC2EStop 3

Harmony

Monochromatic

Same hue, varied lightness and saturation

#2E1353Stop 1 #502191Stop 2 #722FD0Stop 3 #9C6EDEStop 4 #C7ACECStop 5

Using this color

Where #702ecc works

#702ECC (#702ecc) sits in the deep purple family at about 265° hue, 63% saturation, and 49% lightness. Contrast is 7.11:1 on white and 2.95:1 on black, so white labels read more clearly on the swatch itself. Nearest Tailwind token: violet-700 (approximation unless the hex is an official scale stop).

Sensible jobs for this swatch

primary buttons and key accents
text or icons on a white canvas

On a black or near-black UI, #702ecc is 2.95:1. Prefer it as a fill, border, or large heading rather than 16px copy.

Family context: Mystery, ambition, and creativity. Strong for artistic and spiritual associations. Common uses still include buttons, charts, and accents in the Deep Purple range — always verify the pair for this exact hex in the contrast checker.

Similar & related colors

Nearby colors from the library by perceptual distance

Web Safe #6633CC#6633CC Tailwind violet 700#6D28D9 Tailwind purple 700#7E22CE Material Deep Purple 500#673AB7 Material Deep Purple 600#5E35B1 BlueViolet#8A2BE2 Web Safe #6600CC#6600CC Tailwind violet 800#5B21B6 Tailwind violet 600#7C3AED Tailwind purple 800#6B21A8 DarkViolet#9400D3 Spectrum #4433E1#4433E1