色名 · #FEE5BA
Butter Creme
Butter Cremeは#FEE5BA：rgb(254 229 186)、hsl(38 97% 86%)、oklch(0.932 0.062 81.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Butter Creme color name →
#FEE5BA
oklch(0.932 0.062 81.2)
カラー変換
- HEX
- #fee5ba
- RGB
- rgb(254 229 186)
- HSL
- hsl(38 97% 86%)
- HWB
- hwb(38 73% 0%)
- OKLCH
- oklch(0.932 0.062 81.2)
- OKLab
- oklab(0.932 0.01 0.061)
- CIE Lab
- lab(92.22 4.18 24.34)
- LCH
- lch(92.22 24.7 80.3)
- CMYK
- cmyk(0% 10% 27% 0%)
ティント · シェード · トーン
ティント
- FEE8C1
- FEEAC8
- FEEDCF
- FFF0D6
- FFF2DD
- FFF5E4
- FFF7EB
- FFFAF1
- FFFCF8
シェード
- DDC7A1
- BDAA89
- 9E8E72
- 80725C
- 635846
- 473F32
- 2D281E
- 16120D
- 030302
トーン
- F1DAB4
- E4D0AE
- D7C6A9
- CABBA3
- BDB19D
- B1A797
- A49D92
- 98938C
- 8C8A86
カラーハーモニー
補色 +180°
- FEE5BA
Butter Creme
- DCE9FF
≈ Cloudless
類似色 -30° +30°
- FEE5BA
Butter Creme
- FFE2D1
≈ Powdered Peach
- E9EDBE
≈ Spring Blossom
トライアド +120° +240°
- FEE5BA
Butter Creme
- B8F6FA
≈ Pale Sky
- FADDFF
≈ Sugarpills
スプリットコンプリメンタリー +150° +210°
- FEE5BA
Butter Creme
- CEEEFF
≈ Blue Hijab
- E8E5FF
≈ Lavender Mist
テトラード +90° +180° +270°
- FEE5BA
Butter Creme
- BFF7E3
≈ Shallow End
- DCE9FF
≈ Cloudless
- FFDEEC
≈ Transparent Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.22:1 · APCA Lc 11
Ag
AAA黒の上
WCAG 17.13:1 · APCA Lc 93
最適な文字色: #000000
WCAG 17.13:1 (AAA) · APCA Lc 93
Contrast pairs
コードスニペット
CSS
:root {
--butter-creme: #fee5ba;
--butter-creme-rgb: 254 229 186;
--butter-creme-oklch: oklch(0.932 0.062 81.2);
}
.element {
color: var(--butter-creme);
background-color: hsl(38 97% 86%);
border-color: oklch(0.932 0.062 81.2);
}Tailwind CSS v4
@theme {
--color-butter-creme: #fee5ba;
--color-butter-creme-50: #fef4e2;
--color-butter-creme-100: #f2e7d1;
--color-butter-creme-200: #e1d2b7;
--color-butter-creme-300: #c7b594;
--color-butter-creme-400: #b19b75;
--color-butter-creme-500: #9b8256;
--color-butter-creme-600: #836e49;
--color-butter-creme-700: #69583a;
--color-butter-creme-800: #4e4029;
--color-butter-creme-900: #362c1c;
--color-butter-creme-950: #21190c;
}SCSS
$butter-creme: #fee5ba;
$butter-creme-rgb: 254, 229, 186;
$butter-creme-light: mix(#fff, $butter-creme, 20%);
$butter-creme-dark: mix(#000, $butter-creme, 20%);
.element {
color: $butter-creme;
box-shadow: 0 0 0 2px rgba($butter-creme, 0.35);
}