色名 · #EEDDCC
Bare Bone
Bare Boneは#EEDDCC：rgb(238 221 204)、hsl(30 50% 87%)、oklch(0.907 0.03 67.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Bare Bone color name →
#EEDDCC
oklch(0.907 0.03 67.4)
カラー変換
- HEX
- #eeddcc
- RGB
- rgb(238 221 204)
- HSL
- hsl(30 50% 87%)
- HWB
- hwb(30 80% 7%)
- OKLCH
- oklch(0.907 0.03 67.4)
- OKLab
- oklab(0.907 0.011 0.027)
- CIE Lab
- lab(89.17 3.99 10.59)
- LCH
- lch(89.17 11.32 69.4)
- CMYK
- cmyk(0% 7% 14% 7%)
ティント · シェード · トーン
ティント
- F0E0D1
- F1E4D6
- F3E7DB
- F5EBE0
- F7EEE5
- F8F1EA
- FAF5F0
- FCF8F5
- FDFCFA
シェード
- CFC0B1
- B1A497
- 93887E
- 776E65
- 5C554E
- 423D37
- 2A2622
- 14110F
- 030202
トーン
- E2D3C4
- D7CABC
- CCC0B5
- C1B7AD
- B6ADA5
- ABA49E
- A09B96
- 95928F
- 8A8987
カラーハーモニー
補色 +180°
- EEDDCC
Bare Bone
- D1E3F3
≈ Weathered Blue
類似色 -30° +30°
- EEDDCC
Bare Bone
- F3DAD3
≈ Pinkwash
- E5E1CB
≈ Canyon Echo
トライアド +120° +240°
- EEDDCC
Bare Bone
- CBE7E3
≈ Jagged Ice
- E5DBF0
≈ Princess Fairy Tale
スプリットコンプリメンタリー +150° +210°
- EEDDCC
Bare Bone
- CBE6ED
≈ Sapphireberry
- DBDFF4
≈ Lower Lavender
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.32:1 · APCA Lc 16
Ag
AAA黒の上
WCAG 15.84:1 · APCA Lc 88
最適な文字色: #000000
WCAG 15.84:1 (AAA) · APCA Lc 88
Contrast pairs
コードスニペット
CSS
:root {
--bare-bone: #eeddcc;
--bare-bone-rgb: 238 221 204;
--bare-bone-oklch: oklch(0.907 0.03 67.4);
}
.element {
color: var(--bare-bone);
background-color: hsl(30 50% 87%);
border-color: oklch(0.907 0.03 67.4);
}Tailwind CSS v4
@theme {
--color-bare-bone: #eeddcc;
--color-bare-bone-50: #fbf4ec;
--color-bare-bone-100: #efe6de;
--color-bare-bone-200: #ddd2c7;
--color-bare-bone-300: #c2b5a8;
--color-bare-bone-400: #ab9c8c;
--color-bare-bone-500: #948372;
--color-bare-bone-600: #7d6f60;
--color-bare-bone-700: #64594d;
--color-bare-bone-800: #4a4038;
--color-bare-bone-900: #332c26;
--color-bare-bone-950: #1f1915;
}SCSS
$bare-bone: #eeddcc;
$bare-bone-rgb: 238, 221, 204;
$bare-bone-light: mix(#fff, $bare-bone, 20%);
$bare-bone-dark: mix(#000, $bare-bone, 20%);
.element {
color: $bare-bone;
box-shadow: 0 0 0 2px rgba($bare-bone, 0.35);
}