色名 · #F8DCA3
Clay Dust
Clay Dustは#F8DCA3：rgb(248 220 163)、hsl(40 86% 81%)、oklch(0.904 0.079 84.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Clay Dust color name →
#F8DCA3
oklch(0.904 0.079 84.7)
カラー変換
- HEX
- #f8dca3
- RGB
- rgb(248 220 163)
- HSL
- hsl(40 86% 81%)
- HWB
- hwb(40 64% 3%)
- OKLCH
- oklch(0.904 0.079 84.7)
- OKLab
- oklab(0.904 0.007 0.079)
- CIE Lab
- lab(89.12 4.14 31.81)
- LCH
- lch(89.12 32.08 82.6)
- CMYK
- cmyk(0% 11% 34% 3%)
ティント · シェード · トーン
ティント
- F9E0AD
- FAE3B6
- FAE7BF
- FBEAC9
- FCEED2
- FCF1DB
- FDF5E4
- FEF8ED
- FEFCF6
シェード
- D8BF8D
- B8A378
- 9A8863
- 7C6E4F
- 60543C
- 453C2A
- 2C2619
- 15110A
- 030201
トーン
- EBD2A0
- DFC99D
- D3C099
- C6B696
- BAAD93
- AEA48F
- A39B8B
- 979288
- 8B8984
カラーハーモニー
補色 +180°
- F8DCA3
Clay Dust
- D0E0FF
≈ Arc Light
類似色 -30° +30°
- F8DCA3
Clay Dust
- FFD6BC
≈ Mom’s Love
- DDE6AA
≈ Lichen Gold
トライアド +120° +240°
- F8DCA3
Clay Dust
- 9FEFF8
≈ Permafrost
- FBCEFD
≈ Pink Diamond
スプリットコンプリメンタリー +150° +210°
- F8DCA3
Clay Dust
- BDE6FF
≈ Icy Landscape
- E1D9FF
≈ Transparent Blue
テトラード +90° +180° +270°
- F8DCA3
Clay Dust
- A7F1DC
≈ Magic Mint
- D0E0FF
≈ Arc Light
- FFD1E1
≈ Light Pink
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.33:1 · APCA Lc 16
Ag
AAA黒の上
WCAG 15.75:1 · APCA Lc 87
最適な文字色: #000000
WCAG 15.75:1 (AAA) · APCA Lc 87
Contrast pairs
コードスニペット
CSS
:root {
--clay-dust: #f8dca3;
--clay-dust-rgb: 248 220 163;
--clay-dust-oklch: oklch(0.904 0.079 84.7);
}
.element {
color: var(--clay-dust);
background-color: hsl(40 86% 81%);
border-color: oklch(0.904 0.079 84.7);
}Tailwind CSS v4
@theme {
--color-clay-dust: #f8dca3;
--color-clay-dust-50: #fff4dc;
--color-clay-dust-100: #f3e7cb;
--color-clay-dust-200: #e3d3ae;
--color-clay-dust-300: #c9b589;
--color-clay-dust-400: #b49b67;
--color-clay-dust-500: #9f8245;
--color-clay-dust-600: #866e3b;
--color-clay-dust-700: #6b582f;
--color-clay-dust-800: #504021;
--color-clay-dust-900: #382c15;
--color-clay-dust-950: #221907;
}SCSS
$clay-dust: #f8dca3;
$clay-dust-rgb: 248, 220, 163;
$clay-dust-light: mix(#fff, $clay-dust, 20%);
$clay-dust-dark: mix(#000, $clay-dust, 20%);
.element {
color: $clay-dust;
box-shadow: 0 0 0 2px rgba($clay-dust, 0.35);
}