色名 · #F4E5E7
First Impression
First Impressionは#F4E5E7：rgb(244 229 231)、hsl(352 41% 93%)、oklch(0.934 0.017 8.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · First Impression color name →
#F4E5E7
oklch(0.934 0.017 8.2)
カラー変換
- HEX
- #f4e5e7
- RGB
- rgb(244 229 231)
- HSL
- hsl(352 41% 93%)
- HWB
- hwb(352 90% 4%)
- OKLCH
- oklch(0.934 0.017 8.2)
- OKLab
- oklab(0.934 0.016 0.002)
- CIE Lab
- lab(92.2 5.53 0.95)
- LCH
- lch(92.2 5.61 9.8)
- CMYK
- cmyk(0% 6% 5% 4%)
ティント · シェード · トーン
ティント
- F5E8E9
- F6EAEC
- F7EDEE
- F8EFF1
- FAF2F3
- FBF5F5
- FCF7F8
- FDFAFA
- FEFCFD
シェード
- D4C7C9
- B5AAAB
- 978E8F
- 7A7273
- 5E5859
- 443F40
- 2B2828
- 141213
- 030303
トーン
- E8DADC
- DCD0D2
- D0C6C7
- C4BBBC
- B8B1B2
- ADA7A8
- A19D9E
- 969394
- 8B8A8A
カラーハーモニー
補色 +180°
- F4E5E7
First Impression
- DEEDEB
≈ Roman White
類似色 -30° +30°
- F4E5E7
First Impression
- F1E5ED
≈ In the Spotlight
- F4E6E1
≈ Clerestory
トライアド +120° +240°
- F4E5E7
First Impression
- E6ECE0
≈ Calm Thoughts
- E1EBF4
≈ Out Cold
スプリットコンプリメンタリー +150° +210°
- F4E5E7
First Impression
- E1EDE5
≈ Molten Ice
- DEECF1
≈ Prelude
テトラード +90° +180° +270°
- F4E5E7
First Impression
- ECEADD
≈ Wedded Bliss
- DEEDEB
≈ Roman White
- E6E8F5
≈ Whisper Blue
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.22:1 · APCA Lc 11
Ag
AAA黒の上
WCAG 17.20:1 · APCA Lc 93
最適な文字色: #000000
WCAG 17.20:1 (AAA) · APCA Lc 93
Contrast pairs
コードスニペット
CSS
:root {
--first-impression: #f4e5e7;
--first-impression-rgb: 244 229 231;
--first-impression-oklch: oklch(0.934 0.017 8.2);
}
.element {
color: var(--first-impression);
background-color: hsl(352 41% 93%);
border-color: oklch(0.934 0.017 8.2);
}Tailwind CSS v4
@theme {
--color-first-impression: #f4e5e7;
--color-first-impression-50: #faf3f4;
--color-first-impression-100: #ede6e6;
--color-first-impression-200: #dbd1d2;
--color-first-impression-300: #c0b4b5;
--color-first-impression-400: #a89b9c;
--color-first-impression-500: #918284;
--color-first-impression-600: #7a6e70;
--color-first-impression-700: #625859;
--color-first-impression-800: #484041;
--color-first-impression-900: #322c2d;
--color-first-impression-950: #1e191a;
}SCSS
$first-impression: #f4e5e7;
$first-impression-rgb: 244, 229, 231;
$first-impression-light: mix(#fff, $first-impression, 20%);
$first-impression-dark: mix(#000, $first-impression, 20%);
.element {
color: $first-impression;
box-shadow: 0 0 0 2px rgba($first-impression, 0.35);
}