色名 · #EEE2E0
Shattered Porcelain
Shattered Porcelainは#EEE2E0：rgb(238 226 224)、hsl(9 29% 91%)、oklch(0.922 0.013 28.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Shattered Porcelain color name →
#EEE2E0
oklch(0.922 0.013 28.9)
カラー変換
- HEX
- #eee2e0
- RGB
- rgb(238 226 224)
- HSL
- hsl(9 29% 91%)
- HWB
- hwb(9 88% 7%)
- OKLCH
- oklch(0.922 0.013 28.9)
- OKLab
- oklab(0.922 0.012 0.006)
- CIE Lab
- lab(90.81 3.97 2.52)
- LCH
- lch(90.81 4.7 32.4)
- CMYK
- cmyk(0% 5% 6% 7%)
ティント · シェード · トーン
ティント
- F0E5E3
- F1E8E6
- F3EBE9
- F5EEEC
- F7F0EF
- F8F3F3
- FAF6F6
- FCF9F9
- FDFCFC
シェード
- CFC4C3
- B1A8A6
- 938C8A
- 777170
- 5C5756
- 423E3E
- 2A2727
- 141212
- 030302
トーン
- E2D8D6
- D7CECC
- CCC4C2
- C1BAB8
- B5B0AF
- ABA6A5
- A09C9C
- 959392
- 8A8989
カラーハーモニー
補色 +180°
- EEE2E0
Shattered Porcelain
- DCE8EA
≈ Wave Crest
類似色 -30° +30°
- EEE2E0
Shattered Porcelain
- EDE2E5
≈ Delicacy White
- ECE3DD
≈ Bistro Napkin
トライアド +120° +240°
- EEE2E0
Shattered Porcelain
- DFE8E0
≈ Lost in Istanbul
- E1E5EE
≈ Ghostly Tuna
スプリットコンプリメンタリー +150° +210°
- EEE2E0
Shattered Porcelain
- DCE8E5
≈ Starburst
- DDE7ED
≈ White Frost
テトラード +90° +180° +270°
- EEE2E0
Shattered Porcelain
- E4E7DD
≈ Crystal Brooke
- DCE8EA
≈ Wave Crest
- E6E3ED
≈ Soft Iris
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.26:1 · APCA Lc 13
Ag
AAA黒の上
WCAG 16.59:1 · APCA Lc 91
最適な文字色: #000000
WCAG 16.59:1 (AAA) · APCA Lc 91
Contrast pairs
コードスニペット
CSS
:root {
--shattered-porcelain: #eee2e0;
--shattered-porcelain-rgb: 238 226 224;
--shattered-porcelain-oklch: oklch(0.922 0.013 28.9);
}
.element {
color: var(--shattered-porcelain);
background-color: hsl(9 29% 91%);
border-color: oklch(0.922 0.013 28.9);
}Tailwind CSS v4
@theme {
--color-shattered-porcelain: #eee2e0;
--color-shattered-porcelain-50: #f9f4f3;
--color-shattered-porcelain-100: #ece6e5;
--color-shattered-porcelain-200: #dad2d1;
--color-shattered-porcelain-300: #beb5b3;
--color-shattered-porcelain-400: #a69c9a;
--color-shattered-porcelain-500: #8f8381;
--color-shattered-porcelain-600: #796f6d;
--color-shattered-porcelain-700: #615957;
--color-shattered-porcelain-800: #474140;
--color-shattered-porcelain-900: #312d2c;
--color-shattered-porcelain-950: #1d1a19;
}SCSS
$shattered-porcelain: #eee2e0;
$shattered-porcelain-rgb: 238, 226, 224;
$shattered-porcelain-light: mix(#fff, $shattered-porcelain, 20%);
$shattered-porcelain-dark: mix(#000, $shattered-porcelain, 20%);
.element {
color: $shattered-porcelain;
box-shadow: 0 0 0 2px rgba($shattered-porcelain, 0.35);
}