色名 · #5D5B56
Charcoal Sketch
Charcoal Sketchは#5D5B56：rgb(93 91 86)、hsl(43 4% 35%)、oklch(0.471 0.008 88.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Charcoal Sketch color name →
#5D5B56
oklch(0.471 0.008 88.7)
カラー変換
- HEX
- #5d5b56
- RGB
- rgb(93 91 86)
- HSL
- hsl(43 4% 35%)
- HWB
- hwb(43 34% 64%)
- OKLCH
- oklch(0.471 0.008 88.7)
- OKLab
- oklab(0.471 0 0.008)
- CIE Lab
- lab(38.72 0.07 3.19)
- LCH
- lch(38.72 3.19 88.7)
- CMYK
- cmyk(0% 2% 8% 64%)
ティント · シェード · トーン
ティント
- 6C6A65
- 7B7975
- 8A8985
- 9A9996
- AAA9A6
- BBBAB8
- CBCBC9
- DCDCDB
- EEEDED
シェード
- 504E4A
- 43413E
- 373532
- 2A2927
- 1F1E1C
- 141312
- 0A0908
- 030302
- 000000
トーン
- 605F5A
- 64625E
- 676662
- 6B6A66
- 6E6D6B
- 72716F
- 757573
- 797877
- 7C7C7C
カラーハーモニー
補色 +180°
- 5D5B56
Charcoal Sketch
- 595B60
≈ Iron Gate
類似色 -30° +30°
- 5D5B56
Charcoal Sketch
- 5F5A57
≈ Waza Bear
- 5B5C57
≈ Charcoal Sketch
トライアド +120° +240°
- 5D5B56
Charcoal Sketch
- 565D5E
≈ Soot
- 5E5A5D
≈ Tornado Cloud
スプリットコンプリメンタリー +150° +210°
- 5D5B56
Charcoal Sketch
- 575C5F
≈ Pencil Point
- 5C5A5F
≈ Tornado Cloud
テトラード +90° +180° +270°
- 5D5B56
Charcoal Sketch
- 565D5B
≈ Soot
- 595B60
≈ Iron Gate
- 5F595B
≈ Waza Bear
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.78:1 · APCA Lc 83
Ag
Fail黒の上
WCAG 3.09:1 · APCA Lc 19
最適な文字色: #FFFFFF
WCAG 6.78:1 (AA) · APCA Lc 83
Contrast pairs
コードスニペット
CSS
:root {
--charcoal-sketch: #5d5b56;
--charcoal-sketch-rgb: 93 91 86;
--charcoal-sketch-oklch: oklch(0.471 0.008 88.7);
}
.element {
color: var(--charcoal-sketch);
background-color: hsl(43 4% 35%);
border-color: oklch(0.471 0.008 88.7);
}Tailwind CSS v4
@theme {
--color-charcoal-sketch: #5d5b56;
--color-charcoal-sketch-50: #f6f5f2;
--color-charcoal-sketch-100: #e9e8e5;
--color-charcoal-sketch-200: #d5d4d0;
--color-charcoal-sketch-300: #b9b7b3;
--color-charcoal-sketch-400: #a09e99;
--color-charcoal-sketch-500: #888680;
--color-charcoal-sketch-600: #73716c;
--color-charcoal-sketch-700: #5c5b57;
--color-charcoal-sketch-800: #44423f;
--color-charcoal-sketch-900: #2f2e2b;
--color-charcoal-sketch-950: #1b1a19;
}SCSS
$charcoal-sketch: #5d5b56;
$charcoal-sketch-rgb: 93, 91, 86;
$charcoal-sketch-light: mix(#fff, $charcoal-sketch, 20%);
$charcoal-sketch-dark: mix(#000, $charcoal-sketch, 20%);
.element {
color: $charcoal-sketch;
box-shadow: 0 0 0 2px rgba($charcoal-sketch, 0.35);
}