色名 · #8822DD
Purple Protest
Purple Protestは#8822DD：rgb(136 34 221)、hsl(273 73% 50%)、oklch(0.521 0.252 302.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Purple Protest color name →
#8822DD
oklch(0.521 0.252 302.3)
カラー変換
- HEX
- #8822dd
- RGB
- rgb(136 34 221)
- HSL
- hsl(273 73% 50%)
- HWB
- hwb(273 13% 13%)
- OKLCH
- oklch(0.521 0.252 302.3)
- OKLab
- oklab(0.521 0.135 -0.213)
- CIE Lab
- lab(39.59 64.49 -75.77)
- LCH
- lch(39.59 99.49 310.4)
- CMYK
- cmyk(38% 85% 0% 13%)
ティント · シェード · トーン
ティント
- 9344E2
- 9E5EE7
- A974EC
- B589F0
- C09DF4
- CDB1F7
- D9C5FA
- E5D8FC
- F2ECFE
シェード
- 751CC0
- 6316A4
- 521188
- 410B6E
- 310755
- 22033D
- 130126
- 060011
- 010002
トーン
- 8736D4
- 8644CC
- 854FC3
- 8458BA
- 8360B1
- 8268A8
- 826E9F
- 817595
- 807B8B
カラーハーモニー
補色 +180°
- 8822DD
Purple Protest
- 5D7400
≈ Topiary Green
類似色 -30° +30°
- 8822DD
Purple Protest
- 4247F6
≈ Pretentious Peacock
- AF00A2
≈ Magentle
トライアド +120° +240°
- 8822DD
Purple Protest
- 995700
≈ Charlie Brown
- 007A6D
≈ Pond Moss
スプリットコンプリメンタリー +150° +210°
- 8822DD
Purple Protest
- 7F6600
≈ Arousing Alligator
- 007E3F
≈ Charmed Green
テトラード +90° +180° +270°
- 8822DD
Purple Protest
- C02200
≈ Crimson Sunset
- 5D7400
≈ Topiary Green
- 007688
≈ Glamour Green
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.32:1 · APCA Lc 80
Ag
Fail黒の上
WCAG 3.31:1 · APCA Lc 22
最適な文字色: #FFFFFF
WCAG 6.32:1 (AA) · APCA Lc 80
Contrast pairs
コードスニペット
CSS
:root {
--purple-protest: #8822dd;
--purple-protest-rgb: 136 34 221;
--purple-protest-oklch: oklch(0.521 0.252 302.3);
}
.element {
color: var(--purple-protest);
background-color: hsl(273 73% 50%);
border-color: oklch(0.521 0.252 302.3);
}Tailwind CSS v4
@theme {
--color-purple-protest: #8822dd;
--color-purple-protest-50: #ffe4ff;
--color-purple-protest-100: #fad3ff;
--color-purple-protest-200: #ecb7ff;
--color-purple-protest-300: #d591ff;
--color-purple-protest-400: #bd6dff;
--color-purple-protest-500: #a93eff;
--color-purple-protest-600: #8f38e2;
--color-purple-protest-700: #722db6;
--color-purple-protest-800: #52208a;
--color-purple-protest-900: #391562;
--color-purple-protest-950: #240443;
}SCSS
$purple-protest: #8822dd;
$purple-protest-rgb: 136, 34, 221;
$purple-protest-light: mix(#fff, $purple-protest, 20%);
$purple-protest-dark: mix(#000, $purple-protest, 20%);
.element {
color: $purple-protest;
box-shadow: 0 0 0 2px rgba($purple-protest, 0.35);
}