色名 · #4422EE
Violet Glow
Violet Glowは#4422EE：rgb(68 34 238)、hsl(250 86% 53%)、oklch(0.472 0.272 275.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Violet Glow color name →
#4422EE
oklch(0.472 0.272 275.7)
カラー変換
- HEX
- #4422ee
- RGB
- rgb(68 34 238)
- HSL
- hsl(250 86% 53%)
- HWB
- hwb(250 13% 7%)
- OKLCH
- oklch(0.472 0.272 275.7)
- OKLab
- oklab(0.472 0.027 -0.27)
- CIE Lab
- lab(33.17 59.16 -96.36)
- LCH
- lch(33.17 113.07 301.5)
- CMYK
- cmyk(71% 86% 0% 7%)
ティント · シェード · トーン
ティント
- 4F47F2
- 5D62F6
- 6D78F9
- 7F8DFC
- 92A1FE
- A7B4FF
- BCC7FF
- D2DAFF
- E8EDFF
シェード
- 3A1CCF
- 3016B1
- 261193
- 1D0B77
- 14075C
- 0C0342
- 05012A
- 020014
- 000003
トーン
- 4638E4
- 4947DA
- 4D52D0
- 535BC5
- 5963BB
- 606AB0
- 6771A5
- 6F7699
- 787B8D
カラーハーモニー
補色 +180°
- 4422EE
Violet Glow
- 6C5A00
≈ Brussels Sprout Green
類似色 -30° +30°
- 4422EE
Violet Glow
- 005F9A
≈ Hyper Blue
- 7E00C4
≈ Violet Poison
トライアド +120° +240°
- 4422EE
Violet Glow
- A22A00
≈ Tabasco
- 006E3E
≈ Dartmouth Green
スプリットコンプリメンタリー +150° +210°
- 4422EE
Violet Glow
- 824D00
≈ Gédéon Brown
- 4B6600
≈ Serrano Pepper
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.75:1 · APCA Lc 85
Ag
Fail黒の上
WCAG 2.70:1 · APCA Lc 17
最適な文字色: #FFFFFF
WCAG 7.75:1 (AAA) · APCA Lc 85
Contrast pairs
コードスニペット
CSS
:root {
--violet-glow: #4422ee;
--violet-glow-rgb: 68 34 238;
--violet-glow-oklch: oklch(0.472 0.272 275.7);
}
.element {
color: var(--violet-glow);
background-color: hsl(250 86% 53%);
border-color: oklch(0.472 0.272 275.7);
}Tailwind CSS v4
@theme {
--color-violet-glow: #4422ee;
--color-violet-glow-50: #e2eeff;
--color-violet-glow-100: #d2dfff;
--color-violet-glow-200: #bac6ff;
--color-violet-glow-300: #9aa3ff;
--color-violet-glow-400: #7a81ff;
--color-violet-glow-500: #6457ff;
--color-violet-glow-600: #544cff;
--color-violet-glow-700: #433dd0;
--color-violet-glow-800: #2c2d9d;
--color-violet-glow-900: #1d1f70;
--color-violet-glow-950: #0f0b4e;
}SCSS
$violet-glow: #4422ee;
$violet-glow-rgb: 68, 34, 238;
$violet-glow-light: mix(#fff, $violet-glow, 20%);
$violet-glow-dark: mix(#000, $violet-glow, 20%);
.element {
color: $violet-glow;
box-shadow: 0 0 0 2px rgba($violet-glow, 0.35);
}