色名 · #8A7D69
Clay Bath
Clay Bathは#8A7D69：rgb(138 125 105)、hsl(36 14% 48%)、oklch(0.596 0.033 78.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Clay Bath color name →
#8A7D69
oklch(0.596 0.033 78.6)
カラー変換
- HEX
- #8a7d69
- RGB
- rgb(138 125 105)
- HSL
- hsl(36 14% 48%)
- HWB
- hwb(36 41% 46%)
- OKLCH
- oklch(0.596 0.033 78.6)
- OKLab
- oklab(0.596 0.007 0.033)
- CIE Lab
- lab(53.18 2.63 12.85)
- LCH
- lch(53.18 13.12 78.4)
- CMYK
- cmyk(0% 9% 24% 46%)
ティント · シェード · トーン
ティント
- 958977
- A09685
- ACA294
- B7AFA2
- C3BCB1
- CFC9C1
- DBD6D0
- E7E4DF
- F3F1EF
シェード
- 776C5A
- 655B4C
- 534B3E
- 423B31
- 322C24
- 221E18
- 14110C
- 070504
- 010100
トーン
- 897D6B
- 887E6E
- 877E70
- 867E72
- 857F75
- 847F77
- 837F79
- 827F7C
- 81807E
カラーハーモニー
補色 +180°
- 8A7D69
Clay Bath
- 738093
≈ Chain Gang Grey
類似色 -30° +30°
- 8A7D69
Clay Bath
- 907A6E
≈ Miami Spice
- 80816A
≈ Ivy Garden
トライアド +120° +240°
- 8A7D69
Clay Bath
- 688586
≈ Thundercloud
- 88798C
≈ Classical Violet
スプリットコンプリメンタリー +150° +210°
- 8A7D69
Clay Bath
- 6B838F
≈ Indigo Mouse
- 7E7C92
≈ Waterloo
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 4.02:1 · APCA Lc 68
Ag
AA黒の上
WCAG 5.21:1 · APCA Lc 34
最適な文字色: #000000
WCAG 5.21:1 (AA) · APCA Lc 34
Contrast pairs
コードスニペット
CSS
:root {
--clay-bath: #8a7d69;
--clay-bath-rgb: 138 125 105;
--clay-bath-oklch: oklch(0.596 0.033 78.6);
}
.element {
color: var(--clay-bath);
background-color: hsl(36 14% 48%);
border-color: oklch(0.596 0.033 78.6);
}Tailwind CSS v4
@theme {
--color-clay-bath: #8a7d69;
--color-clay-bath-50: #faf4eb;
--color-clay-bath-100: #eee7dc;
--color-clay-bath-200: #dcd3c5;
--color-clay-bath-300: #c0b6a5;
--color-clay-bath-400: #a99c89;
--color-clay-bath-500: #92846e;
--color-clay-bath-600: #7c705d;
--color-clay-bath-700: #63594a;
--color-clay-bath-800: #494136;
--color-clay-bath-900: #332d25;
--color-clay-bath-950: #1e1a13;
}SCSS
$clay-bath: #8a7d69;
$clay-bath-rgb: 138, 125, 105;
$clay-bath-light: mix(#fff, $clay-bath, 20%);
$clay-bath-dark: mix(#000, $clay-bath, 20%);
.element {
color: $clay-bath;
box-shadow: 0 0 0 2px rgba($clay-bath, 0.35);
}