色名 · #FFF2D7
Coffee Cream
Coffee Creamは#FFF2D7：rgb(255 242 215)、hsl(40 100% 92%)、oklch(0.964 0.038 85.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Yellow mean? → · Coffee Cream color name →
#FFF2D7
oklch(0.964 0.038 85.3)
カラー変換
- HEX
- #fff2d7
- RGB
- rgb(255 242 215)
- HSL
- hsl(40 100% 92%)
- HWB
- hwb(40 84% 0%)
- OKLCH
- oklch(0.964 0.038 85.3)
- OKLab
- oklab(0.964 0.003 0.038)
- CIE Lab
- lab(96.01 1.33 14.74)
- LCH
- lch(96.01 14.8 84.8)
- CMYK
- cmyk(0% 5% 16% 0%)
ティント · シェード · トーン
ティント
- FFF3DB
- FFF5DF
- FFF6E3
- FFF7E7
- FFF9EB
- FFFAEF
- FFFBF3
- FFFCF7
- FFFEFB
シェード
- DED2BB
- BEB49F
- 9E9685
- 80796B
- 635E52
- 48433B
- 2E2B25
- 161411
- 030302
トーン
- F2E6CE
- E4DAC5
- D7CEBC
- CAC3B3
- BEB7AB
- B1ACA2
- A4A199
- 989691
- 8C8B88
カラーハーモニー
補色 +180°
- FFF2D7
Coffee Cream
- EEF3FF
≈ Placebo Blue
類似色 -30° +30°
- FFF2D7
Coffee Cream
- FFF0E6
≈ Pico Ivory
- F2F7DA
≈ Sprig of Sage
トライアド +120° +240°
- FFF2D7
Coffee Cream
- D8FBFF
≈ Salt Mountain
- FFEDFF
≈ Lovely Euphoric Delight
スプリットコンプリメンタリー +150° +210°
- FFF2D7
Coffee Cream
- E7F6FF
≈ Kodama White
- F4F1FF
≈ Cloud Break
テトラード +90° +180° +270°
- FFF2D7
Coffee Cream
- DAFCF2
≈ Mint Condition
- EEF3FF
≈ Placebo Blue
- FFEEF4
≈ Powder Puff
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.10:1 · APCA Lc 0
Ag
AAA黒の上
WCAG 18.93:1 · APCA Lc 100
最適な文字色: #000000
WCAG 18.93:1 (AAA) · APCA Lc 100
Contrast pairs
コードスニペット
CSS
:root {
--coffee-cream: #fff2d7;
--coffee-cream-rgb: 255 242 215;
--coffee-cream-oklch: oklch(0.964 0.038 85.3);
}
.element {
color: var(--coffee-cream);
background-color: hsl(40 100% 92%);
border-color: oklch(0.964 0.038 85.3);
}Tailwind CSS v4
@theme {
--color-coffee-cream: #fff2d7;
--color-coffee-cream-50: #faf5e9;
--color-coffee-cream-100: #ede7da;
--color-coffee-cream-200: #dbd4c2;
--color-coffee-cream-300: #c0b7a2;
--color-coffee-cream-400: #a99d85;
--color-coffee-cream-500: #92856a;
--color-coffee-cream-600: #7b705a;
--color-coffee-cream-700: #635a48;
--color-coffee-cream-800: #494134;
--color-coffee-cream-900: #322d23;
--color-coffee-cream-950: #1e1a12;
}SCSS
$coffee-cream: #fff2d7;
$coffee-cream-rgb: 255, 242, 215;
$coffee-cream-light: mix(#fff, $coffee-cream, 20%);
$coffee-cream-dark: mix(#000, $coffee-cream, 20%);
.element {
color: $coffee-cream;
box-shadow: 0 0 0 2px rgba($coffee-cream, 0.35);
}