色名 · #F4DABB
Morning Blossom
Morning Blossomは#F4DABB：rgb(244 218 187)、hsl(33 72% 85%)、oklch(0.902 0.05 72)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Morning Blossom color name →
#F4DABB
oklch(0.902 0.05 72)
カラー変換
- HEX
- #f4dabb
- RGB
- rgb(244 218 187)
- HSL
- hsl(33 72% 85%)
- HWB
- hwb(33 73% 4%)
- OKLCH
- oklch(0.902 0.05 72)
- OKLab
- oklab(0.902 0.015 0.048)
- CIE Lab
- lab(88.64 5.83 18.78)
- LCH
- lch(88.64 19.66 72.7)
- CMYK
- cmyk(0% 11% 23% 4%)
ティント · シェード · トーン
ティント
- F5DEC2
- F6E1C9
- F7E5CF
- F9E9D6
- FAEDDD
- FBF0E4
- FCF4EB
- FDF8F1
- FEFBF8
シェード
- D4BDA2
- B5A28A
- 978773
- 7A6C5C
- 5E5446
- 443C32
- 2B251F
- 14110D
- 030202
トーン
- E8D1B5
- DCC7AF
- D0BEA9
- C4B5A3
- B8AC9D
- ADA397
- A19A92
- 96918C
- 8B8986
カラーハーモニー
補色 +180°
- F4DABB
Morning Blossom
- C8E2FF
≈ Fresh Water
類似色 -30° +30°
- F4DABB
Morning Blossom
- FDD5C5
≈ Coral Dune
- E5E0BB
≈ Swan Dance
トライアド +120° +240°
- F4DABB
Morning Blossom
- B9EAE7
≈ Tahitian Breeze
- EAD6F7
≈ Scented Spring
スプリットコンプリメンタリー +150° +210°
- F4DABB
Morning Blossom
- BBE7F7
≈ Breaking the Ice
- D9DBFF
≈ Transparent Blue
テトラード +90° +180° +270°
- F4DABB
Morning Blossom
- C2EAD5
≈ Frozen Pea
- C8E2FF
≈ Fresh Water
- F7D2E8
≈ Pink Lily
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.34:1 · APCA Lc 17
Ag
AAA黒の上
WCAG 15.59:1 · APCA Lc 87
最適な文字色: #000000
WCAG 15.59:1 (AAA) · APCA Lc 87
Contrast pairs
コードスニペット
CSS
:root {
--morning-blossom: #f4dabb;
--morning-blossom-rgb: 244 218 187;
--morning-blossom-oklch: oklch(0.902 0.05 72);
}
.element {
color: var(--morning-blossom);
background-color: hsl(33 72% 85%);
border-color: oklch(0.902 0.05 72);
}Tailwind CSS v4
@theme {
--color-morning-blossom: #f4dabb;
--color-morning-blossom-50: #fef3e6;
--color-morning-blossom-100: #f2e6d6;
--color-morning-blossom-200: #e1d2bd;
--color-morning-blossom-300: #c7b49c;
--color-morning-blossom-400: #b19a7e;
--color-morning-blossom-500: #9b8161;
--color-morning-blossom-600: #836d53;
--color-morning-blossom-700: #695742;
--color-morning-blossom-800: #4e402f;
--color-morning-blossom-900: #362c20;
--color-morning-blossom-950: #211910;
}SCSS
$morning-blossom: #f4dabb;
$morning-blossom-rgb: 244, 218, 187;
$morning-blossom-light: mix(#fff, $morning-blossom, 20%);
$morning-blossom-dark: mix(#000, $morning-blossom, 20%);
.element {
color: $morning-blossom;
box-shadow: 0 0 0 2px rgba($morning-blossom, 0.35);
}