色名 · #EECC99
Hummus
Hummusは#EECC99：rgb(238 204 153)、hsl(36 71% 77%)、oklch(0.862 0.076 77.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Hummus color name →
#EECC99
oklch(0.862 0.076 77.5)
カラー変換
- HEX
- #eecc99
- RGB
- rgb(238 204 153)
- HSL
- hsl(36 71% 77%)
- HWB
- hwb(36 60% 7%)
- OKLCH
- oklch(0.862 0.076 77.5)
- OKLab
- oklab(0.862 0.016 0.075)
- CIE Lab
- lab(84.09 7.19 30.14)
- LCH
- lch(84.09 30.99 76.6)
- CMYK
- cmyk(0% 14% 36% 7%)
ティント · シェード · トーン
ティント
- F0D1A3
- F2D6AE
- F3DBB8
- F5E1C2
- F7E6CC
- F9EBD7
- FAF0E1
- FCF5EB
- FDFAF5
シェード
- CFB184
- B19770
- 937E5D
- 77654A
- 5C4E38
- 423727
- 2A2217
- 140F08
- 030201
トーン
- E3C497
- D7BC95
- CCB592
- C1AD90
- B6A58E
- AB9E8B
- A09688
- 958F86
- 8B8783
カラーハーモニー
補色 +180°
- EECC99
Hummus
- B6D4FF
≈ Ice Cold Stare
類似色 -30° +30°
- EECC99
Hummus
- FDC3A7
≈ Sweet Apricot
- D6D69B
≈ Crocodile Tears
トライアド +120° +240°
- EECC99
Hummus
- 94E2E3
≈ Aqua Fiesta
- E7C3F3
≈ Purple’s Baby Sister
スプリットコンプリメンタリー +150° +210°
- EECC99
Hummus
- 9CDCF9
≈ Columbia Blue
- CECBFF
≈ Lavender Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.52:1 · APCA Lc 24
Ag
AAA黒の上
WCAG 13.73:1 · APCA Lc 79
最適な文字色: #000000
WCAG 13.73:1 (AAA) · APCA Lc 79
Contrast pairs
コードスニペット
CSS
:root {
--hummus: #eecc99;
--hummus-rgb: 238 204 153;
--hummus-oklch: oklch(0.862 0.076 77.5);
}
.element {
color: var(--hummus);
background-color: hsl(36 71% 77%);
border-color: oklch(0.862 0.076 77.5);
}Tailwind CSS v4
@theme {
--color-hummus: #eecc99;
--color-hummus-50: #fff3dd;
--color-hummus-100: #f6e6cc;
--color-hummus-200: #e6d1b0;
--color-hummus-300: #ccb48b;
--color-hummus-400: #b8996a;
--color-hummus-500: #a28049;
--color-hummus-600: #896c3f;
--color-hummus-700: #6e5632;
--color-hummus-800: #523f23;
--color-hummus-900: #392b17;
--color-hummus-950: #231808;
}SCSS
$hummus: #eecc99;
$hummus-rgb: 238, 204, 153;
$hummus-light: mix(#fff, $hummus, 20%);
$hummus-dark: mix(#000, $hummus, 20%);
.element {
color: $hummus;
box-shadow: 0 0 0 2px rgba($hummus, 0.35);
}