色名 · #D6B4FC
Light Violet
Light Violetは#D6B4FC：rgb(214 180 252)、hsl(268 92% 85%)、oklch(0.824 0.105 305.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Light Violet color name →
#D6B4FC
oklch(0.824 0.105 305.8)
カラー変換
- HEX
- #d6b4fc
- RGB
- rgb(214 180 252)
- HSL
- hsl(268 92% 85%)
- HWB
- hwb(268 71% 1%)
- OKLCH
- oklch(0.824 0.105 305.8)
- OKLab
- oklab(0.824 0.061 -0.085)
- CIE Lab
- lab(78.22 22.71 -31.19)
- LCH
- lch(78.22 38.58 306.1)
- CMYK
- cmyk(15% 29% 0% 1%)
ティント · シェード · トーン
ティント
- DABCFD
- DEC3FD
- E2CBFE
- E6D2FE
- EADAFF
- EEE1FF
- F3E9FF
- F7F0FF
- FBF8FF
シェード
- BA9CDB
- 9E85BB
- 846E9C
- 6A587E
- 524462
- 3B3047
- 251D2D
- 100C16
- 020203
トーン
- CDAFEF
- C4AAE2
- BBA5D6
- B39FC9
- AA9ABD
- A195B0
- 9990A4
- 918B98
- 88858C
カラーハーモニー
補色 +180°
- D6B4FC
Light Violet
- B5D286
≈ Lettuce Green
類似色 -30° +30°
- D6B4FC
Light Violet
- B5C1FF
≈ Dried Lilac
- F1ABE0
≈ Hanami Pink
トライアド +120° +240°
- D6B4FC
Light Violet
- F4B87A
≈ Rosy Skin
- 6BDCCF
≈ Hammam Blue
スプリットコンプリメンタリー +150° +210°
- D6B4FC
Light Violet
- DAC573
≈ Grassroots
- 8BDAA9
≈ Jovial Jade
テトラード +90° +180° +270°
- D6B4FC
Light Violet
- FFAE98
≈ Pink Persimmon
- B5D286
≈ Lettuce Green
- 6BD7F1
≈ Electric Lemonade
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.78:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.79:1 · APCA Lc 70
最適な文字色: #000000
WCAG 11.79:1 (AAA) · APCA Lc 70
Contrast pairs
コードスニペット
CSS
:root {
--light-violet: #d6b4fc;
--light-violet-rgb: 214 180 252;
--light-violet-oklch: oklch(0.824 0.105 305.8);
}
.element {
color: var(--light-violet);
background-color: hsl(268 92% 85%);
border-color: oklch(0.824 0.105 305.8);
}Tailwind CSS v4
@theme {
--color-light-violet: #d6b4fc;
--color-light-violet-50: #fdeeff;
--color-light-violet-100: #f1dfff;
--color-light-violet-200: #e0c9f8;
--color-light-violet-300: #c6a9e1;
--color-light-violet-400: #ae8ed0;
--color-light-violet-500: #9773bd;
--color-light-violet-600: #8061a0;
--color-light-violet-700: #664e80;
--color-light-violet-800: #4a3960;
--color-light-violet-900: #332743;
--color-light-violet-950: #1f152b;
}SCSS
$light-violet: #d6b4fc;
$light-violet-rgb: 214, 180, 252;
$light-violet-light: mix(#fff, $light-violet, 20%);
$light-violet-dark: mix(#000, $light-violet, 20%);
.element {
color: $light-violet;
box-shadow: 0 0 0 2px rgba($light-violet, 0.35);
}