Qual é o código hex da cor violet?

O código hex de violet é #EE82EE. A mesma cor se escreve rgb(238, 130, 238), hsl(300, 76%, 72%) ou oklch(76.2% 0.186 327.2), e no CSS também dá para usar direto a palavra-chave violet.

Dá para usar texto branco sobre violet?

Texto branco sobre violet tem contraste de 2,31:1 e não passa no AA nem para texto grande do WCAG 2.2. Texto preto chega a 9,06:1 e passa no AA e no AAA. No APCA, o valor é Lc −50,2 para branco e Lc 58,7 para preto.

Qual é o RGB de violet?

Violet é rgb(238, 130, 238): vermelho 238, verde 130 e azul 238 na escala de 0 a 255, ou 93,3%, 51,0% e 93,3%. Em número decimal, 15631086.

Cor nomeada do CSS

Cor Violet #EE82EE

Violet (palavra-chave violet no CSS) tem o código hex #EE82EE e o valor RGB rgb(238, 130, 238): um magenta vivo e claro.

Violet#EE82EE

O violet do CSS (#ee82ee) é um roxo-rosado claro, longe do violeta espectral no fim do arco-íris. Para um violeta profundo, use darkviolet.

Códigos da cor Violet

Códigos da cor Violet
Palavra-chave CSS	violet
HEX	#EE82EE
RGB	rgb(238, 130, 238)
HSL	hsl(300, 76%, 72%)
HWB	hwb(300 51% 7%)
OKLCH	oklch(76.2% 0.186 327.2)
CMYK (simples, sem perfil ICC)	cmyk(0%, 45%, 0%, 7%)
Decimal	15.631.086
Família de matiz	Roxos e violetas

Contraste e acessibilidade

Sobre violet, texto preto tem contraste de 9,06:1 e passa no AAA para qualquer tamanho de texto; texto branco fica em 2,31:1.

Razões de contraste do WCAG 2.2 (critérios 1.4.3 e 1.4.6: AA exige 4,5:1 para texto normal e 3:1 para texto grande; AAA exige 7:1 e 4,5:1). APCA Lc é o contraste de luminosidade do modelo APCA-W3 0.0.98G proposto para o WCAG 3; quanto maior o valor absoluto, mais legível, e Lc 75 é o mínimo sugerido para texto corrido.

Contraste e acessibilidade
Combinação	Razão	AA	AA grande	AAA	AAA grande	APCA Lc
Texto preto sobre violet	9,06:1	Passa	Passa	Passa	Passa	58,7
Texto branco sobre violet	2,31:1	Falha	Falha	Falha	Falha	−50,2
Texto violet sobre branco	2,31:1	Falha	Falha	Falha	Falha	45,3
Texto violet sobre preto	9,06:1	Passa	Passa	Passa	Passa	−56,8

Tons claros e escuros

Cada passo mistura violet com branco (tons claros) ou preto (tons escuros) em sRGB com correção gama, o mesmo resultado de color-mix(in srgb, violet, white 25%) no CSS.

Tons claros (misturados com branco)

5%
#ef88ef
15%
#f195f1
25%
#f2a1f2
35%
#f4aef4
45%
#f6baf6
55%
#f7c7f7
65%
#f9d3f9
75%
#fbe0fb
85%
#fcecfc
95%
#fef9fe

Tons escuros (misturados com preto)

5%
#e27ce2
15%
#ca6fca
25%
#b362b3
35%
#9b559b
45%
#834883
55%
#6b3a6b
65%
#532e53
75%
#3c213c
85%
#241424
95%
#0c070c

Harmonias de cor

Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de violet é #4CD067 (perto de limegreen), as análogas são #BE98FF e #FF78B3 e a tríade se completa com #E1A800 e #00CBE2. Para texto por cima, preto dá mais contraste.

Harmonias de cor
Harmonia	Rotação	Cor
Complementar	+180°	#4cd067
Análogas	−30°, +30°	#be98ff#ff78b3
Tríade	+120°, +240°	#e1a800#00cbe2
Complementar dividida	+150°, +210°	#aabf00#00d2b0

Calculadas em OKLCH: o matiz gira 180° (complementar), ±30° (análogas), ±120° (tríade) e 180° ±30° (complementar dividida), com luminosidade e croma mantidos. Quando o resultado sai do sRGB, ele é trazido de volta com o algoritmo de mapeamento de gama do CSS Color 4. Por usar OKLCH, os valores diferem das ferramentas que giram o matiz em HSL, mas as cores ficam com a mesma luminosidade percebida.

Quente ou fria?

Violet fica na fronteira: o matiz de 300° no círculo HSL é um magenta, que parece quente ao lado de azuis e frio ao lado de vermelhos e laranjas.

Cores nomeadas e do Tailwind mais próximas

A distância é o ΔE OK, a distância euclidiana no OKLab multiplicada por 100. Valores abaixo de cerca de 2 são difíceis de distinguir lado a lado.

Cores nomeadas do CSS mais próximas

Cores nomeadas do CSS mais próximas
Cor	HEX	ΔE OK
orchid	#da70d6	6,0
plum	#dda0dd	8,1
hotpink	#ff69b4	8,9

Cores do Tailwind v4 mais próximas

Cores do Tailwind v4 mais próximas
Cor	HEX	ΔE OK
fuchsia-400	#ed6aff	5,9
fuchsia-300	#f4a8ff	8,4
pink-400	#fb64b6	8,9

Código

CSS

.element {
  color: violet;
  background-color: #ee82ee;
  border-color: rgb(238 130 238);
  outline-color: oklch(76.2% 0.186 327.2);
}

Tailwind CSS

<div class="bg-[#ee82ee] text-black">...</div>

/* ou registre uma vez no seu CSS (Tailwind v4) */
@theme {
  --color-violet: #ee82ee;
}
/* depois use bg-violet, text-violet, border-violet */

SwiftUI

import SwiftUI

extension Color {
  static let violet = Color(red: 0.933, green: 0.510, blue: 0.933)
}

Jetpack Compose

import androidx.compose.ui.graphics.Color

val Violet = Color(0xFFEE82EE)

Flutter

import 'package:flutter/material.dart';

const violet = Color(0xFFEE82EE);

Android XML

<!-- res/values/colors.xml -->
<color name="violet">#EE82EE</color>

Perguntas frequentes

Qual é o código hex da cor violet?: O código hex de violet é #EE82EE. A mesma cor se escreve rgb(238, 130, 238), hsl(300, 76%, 72%) ou oklch(76.2% 0.186 327.2), e no CSS também dá para usar direto a palavra-chave violet.
Violet é uma cor quente ou fria?: Violet fica na fronteira: o matiz de 300° no círculo HSL é um magenta, que parece quente ao lado de azuis e frio ao lado de vermelhos e laranjas.
Quais cores combinam com violet?: Girando o matiz em OKLCH e mantendo luminosidade e croma, a complementar de violet é #4CD067 (perto de limegreen), as análogas são #BE98FF e #FF78B3 e a tríade se completa com #E1A800 e #00CBE2. Para texto por cima, preto dá mais contraste.
Dá para usar texto branco sobre violet?: Texto branco sobre violet tem contraste de 2,31:1 e não passa no AA nem para texto grande do WCAG 2.2. Texto preto chega a 9,06:1 e passa no AA e no AAA. No APCA, o valor é Lc −50,2 para branco e Lc 58,7 para preto.
Qual é o RGB de violet?: Violet é rgb(238, 130, 238): vermelho 238, verde 130 e azul 238 na escala de 0 a 255, ou 93,3%, 51,0% e 93,3%. Em número decimal, 15631086.

Revisado em 27 de setembro de 2026 por Arielton Oberek.