色名 · #D8B8F8
Pink Illusion
Pink Illusionは#D8B8F8：rgb(216 184 248)、hsl(270 82% 85%)、oklch(0.832 0.094 307.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Pink Illusion color name →
#D8B8F8
oklch(0.832 0.094 307.2)
カラー変換
- HEX
- #d8b8f8
- RGB
- rgb(216 184 248)
- HSL
- hsl(270 82% 85%)
- HWB
- hwb(270 72% 3%)
- OKLCH
- oklch(0.832 0.094 307.2)
- OKLab
- oklab(0.832 0.057 -0.075)
- CIE Lab
- lab(79.23 20.69 -27.49)
- LCH
- lch(79.23 34.41 307)
- CMYK
- cmyk(13% 26% 0% 3%)
ティント · シェード · トーン
ティント
- DCBFF9
- E0C6FA
- E4CDFB
- E7D4FC
- EBDCFC
- EFE3FD
- F3EAFE
- F7F1FE
- FBF8FF
シェード
- BCA0D8
- A088B8
- 85719A
- 6B5B7C
- 534560
- 3B3145
- 251E2C
- 110C15
- 020203
トーン
- CFB2EC
- C6ADDF
- BDA7D3
- B4A2C7
- AB9CBB
- A296AF
- 9A91A3
- 918B97
- 88868C
カラーハーモニー
補色 +180°
- D8B8F8
Pink Illusion
- B7D491
≈ Fresh Lettuce
類似色 -30° +30°
- D8B8F8
Pink Illusion
- BAC3FF
≈ Light Periwinkle
- F0B1DE
≈ Hanami Pink
トライアド +120° +240°
- D8B8F8
Pink Illusion
- F1BC85
≈ Melon Balls
- 7ADCD2
≈ Shimmering Blue
スプリットコンプリメンタリー +150° +210°
- D8B8F8
Pink Illusion
- D9C980
≈ Spring Grass
- 93DBB0
≈ Peaceful Pastures
テトラード +90° +180° +270°
- D8B8F8
Pink Illusion
- FEB39C
≈ Persicus
- B7D491
≈ Fresh Lettuce
- 7BD7F0
≈ Medium Sky Blue
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.73:1 · APCA Lc 31
Ag
AAA黒の上
WCAG 12.13:1 · APCA Lc 71
最適な文字色: #000000
WCAG 12.13:1 (AAA) · APCA Lc 71
Contrast pairs
コードスニペット
CSS
:root {
--pink-illusion: #d8b8f8;
--pink-illusion-rgb: 216 184 248;
--pink-illusion-oklch: oklch(0.832 0.094 307.2);
}
.element {
color: var(--pink-illusion);
background-color: hsl(270 82% 85%);
border-color: oklch(0.832 0.094 307.2);
}Tailwind CSS v4
@theme {
--color-pink-illusion: #d8b8f8;
--color-pink-illusion-50: #fdeeff;
--color-pink-illusion-100: #f1e0ff;
--color-pink-illusion-200: #e0caf3;
--color-pink-illusion-300: #c6abdc;
--color-pink-illusion-400: #ad90ca;
--color-pink-illusion-500: #9775b7;
--color-pink-illusion-600: #7f639a;
--color-pink-illusion-700: #664f7c;
--color-pink-illusion-800: #4a3a5c;
--color-pink-illusion-900: #332841;
--color-pink-illusion-950: #1f1529;
}SCSS
$pink-illusion: #d8b8f8;
$pink-illusion-rgb: 216, 184, 248;
$pink-illusion-light: mix(#fff, $pink-illusion, 20%);
$pink-illusion-dark: mix(#000, $pink-illusion, 20%);
.element {
color: $pink-illusion;
box-shadow: 0 0 0 2px rgba($pink-illusion, 0.35);
}