色名 · #E7C697
Electrum
Electrumは#E7C697：rgb(231 198 151)、hsl(35 63% 75%)、oklch(0.844 0.072 76.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Electrum color name →
#E7C697
oklch(0.844 0.072 76.3)
カラー変換
- HEX
- #e7c697
- RGB
- rgb(231 198 151)
- HSL
- hsl(35 63% 75%)
- HWB
- hwb(35 59% 9%)
- OKLCH
- oklch(0.844 0.072 76.3)
- OKLab
- oklab(0.844 0.017 0.07)
- CIE Lab
- lab(81.91 7.23 28.17)
- LCH
- lch(81.91 29.08 75.6)
- CMYK
- cmyk(0% 14% 35% 9%)
ティント · シェード · トーン
ティント
- EACCA2
- ECD1AC
- EED7B6
- F1DDC1
- F3E3CB
- F6E8D6
- F8EEE0
- FAF4EA
- FDF9F5
シェード
- C9AC83
- AB926F
- 8F7A5C
- 736249
- 594B37
- 403526
- 282117
- 130E08
- 030201
トーン
- DCBF95
- D2B893
- C7B191
- BDAA8F
- B2A38C
- A89C8A
- 9E9588
- 948E85
- 8A8783
カラーハーモニー
補色 +180°
- E7C697
Electrum
- ADCEFB
≈ Ice Cold Stare
類似色 -30° +30°
- E7C697
Electrum
- F4BEA4
≈ Heirloom Apricot
- D1CF99
≈ Corn Husk Green
トライアド +120° +240°
- E7C697
Electrum
- 92DBDB
≈ Limpet Shell
- DFBEEC
≈ Beefy Pink
スプリットコンプリメンタリー +150° +210°
- E7C697
Electrum
- 99D6F0
≈ Over the Sky
- C7C5F9
≈ Light Periwinkle
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.62:1 · APCA Lc 28
Ag
AAA黒の上
WCAG 12.92:1 · APCA Lc 75
最適な文字色: #000000
WCAG 12.92:1 (AAA) · APCA Lc 75
Contrast pairs
コードスニペット
CSS
:root {
--electrum: #e7c697;
--electrum-rgb: 231 198 151;
--electrum-oklch: oklch(0.844 0.072 76.3);
}
.element {
color: var(--electrum);
background-color: hsl(35 63% 75%);
border-color: oklch(0.844 0.072 76.3);
}Tailwind CSS v4
@theme {
--color-electrum: #e7c697;
--color-electrum-50: #fff3df;
--color-electrum-100: #f5e6ce;
--color-electrum-200: #e5d1b2;
--color-electrum-300: #ccb48e;
--color-electrum-400: #b7996e;
--color-electrum-500: #a2804e;
--color-electrum-600: #896c42;
--color-electrum-700: #6d5635;
--color-electrum-800: #513f25;
--color-electrum-900: #392b19;
--color-electrum-950: #23180a;
}SCSS
$electrum: #e7c697;
$electrum-rgb: 231, 198, 151;
$electrum-light: mix(#fff, $electrum, 20%);
$electrum-dark: mix(#000, $electrum, 20%);
.element {
color: $electrum;
box-shadow: 0 0 0 2px rgba($electrum, 0.35);
}