色名 · #F9DFD7
Veiled Pink
Veiled Pinkは#F9DFD7：rgb(249 223 215)、hsl(14 74% 91%)、oklch(0.923 0.031 37.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Veiled Pink color name →
#F9DFD7
oklch(0.923 0.031 37.8)
カラー変換
- HEX
- #f9dfd7
- RGB
- rgb(249 223 215)
- HSL
- hsl(14 74% 91%)
- HWB
- hwb(14 84% 2%)
- OKLCH
- oklch(0.923 0.031 37.8)
- OKLab
- oklab(0.923 0.024 0.019)
- CIE Lab
- lab(90.82 8.3 7.37)
- LCH
- lch(90.82 11.1 41.6)
- CMYK
- cmyk(0% 10% 14% 2%)
ティント · シェード · トーン
ティント
- FAE2DB
- FAE5DF
- FBE9E3
- FCECE7
- FCEFEB
- FDF2EF
- FDF5F3
- FEF9F7
- FEFCFB
シェード
- D9C2BB
- B9A59F
- 9A8A85
- 7D6F6B
- 615652
- 463D3B
- 2C2725
- 151211
- 030202
トーン
- ECD5CE
- E0CBC5
- D3C2BC
- C7B8B3
- BBAEAB
- AFA5A2
- A39C99
- 979291
- 8B8988
カラーハーモニー
補色 +180°
- F9DFD7
Veiled Pink
- D0EBF3
≈ Chalky Blue White
類似色 -30° +30°
- F9DFD7
Veiled Pink
- F9DDE1
≈ Marshmallow Heart
- F4E2D0
≈ Fondant
トライアド +120° +240°
- F9DFD7
Veiled Pink
- D5ECDE
≈ Light Duck Egg Cream
- E0E4FB
≈ Lavender Mist
スプリットコンプリメンタリー +150° +210°
- F9DFD7
Veiled Pink
- CFEDE9
≈ Ionic Sky
- D6E8FA
≈ Cloudless
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.26:1 · APCA Lc 13
Ag
AAA黒の上
WCAG 16.56:1 · APCA Lc 91
最適な文字色: #000000
WCAG 16.56:1 (AAA) · APCA Lc 91
Contrast pairs
コードスニペット
CSS
:root {
--veiled-pink: #f9dfd7;
--veiled-pink-rgb: 249 223 215;
--veiled-pink-oklch: oklch(0.923 0.031 37.8);
}
.element {
color: var(--veiled-pink);
background-color: hsl(14 74% 91%);
border-color: oklch(0.923 0.031 37.8);
}Tailwind CSS v4
@theme {
--color-veiled-pink: #f9dfd7;
--color-veiled-pink-50: #fef2ef;
--color-veiled-pink-100: #f2e5e0;
--color-veiled-pink-200: #e1d0cb;
--color-veiled-pink-300: #c6b3ac;
--color-veiled-pink-400: #b09992;
--color-veiled-pink-500: #998078;
--color-veiled-pink-600: #826c65;
--color-veiled-pink-700: #685651;
--color-veiled-pink-800: #4c3f3b;
--color-veiled-pink-900: #352b29;
--color-veiled-pink-950: #201916;
}SCSS
$veiled-pink: #f9dfd7;
$veiled-pink-rgb: 249, 223, 215;
$veiled-pink-light: mix(#fff, $veiled-pink, 20%);
$veiled-pink-dark: mix(#000, $veiled-pink, 20%);
.element {
color: $veiled-pink;
box-shadow: 0 0 0 2px rgba($veiled-pink, 0.35);
}