色名 · #6B574A
Chocolate Chunk
Chocolate Chunkは#6B574A：rgb(107 87 74)、hsl(24 18% 35%)、oklch(0.473 0.033 54.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Chocolate Chunk color name →
#6B574A
oklch(0.473 0.033 54.8)
カラー変換
- HEX
- #6b574a
- RGB
- rgb(107 87 74)
- HSL
- hsl(24 18% 35%)
- HWB
- hwb(24 29% 58%)
- OKLCH
- oklch(0.473 0.033 54.8)
- OKLab
- oklab(0.473 0.019 0.027)
- CIE Lab
- lab(38.76 6.92 10.84)
- LCH
- lch(38.76 12.86 57.4)
- CMYK
- cmyk(0% 19% 31% 58%)
ティント · シェード · トーン
ティント
- 79665A
- 87766B
- 95867C
- A4968E
- B3A7A0
- C1B8B2
- D1CAC5
- E0DBD8
- EFEDEB
シェード
- 5C4B3F
- 4E3E35
- 3F332A
- 322720
- 251C17
- 18120E
- 0D0806
- 040302
- 000000
トーン
- 6D5B4F
- 6F5F55
- 72635A
- 74675F
- 766B65
- 786F6A
- 7A7470
- 7C7875
- 7E7C7A
カラーハーモニー
補色 +180°
- 6B574A
Chocolate Chunk
- 4A5F6C
≈ Ragtime Blues
類似色 -30° +30°
- 6B574A
Chocolate Chunk
- 6D5552
≈ Bourbon Truffle
- 645A46
≈ Grand Avenue
トライアド +120° +240°
- 6B574A
Chocolate Chunk
- 48625A
≈ Pine Haven
- 5D586D
≈ Orchid Grey
スプリットコンプリメンタリー +150° +210°
- 6B574A
Chocolate Chunk
- 456165
≈ Linen Grey
- 525C6F
≈ Vintage Indigo
テトラード +90° +180° +270°
- 6B574A
Chocolate Chunk
- 506150
≈ Hampton Green
- 4A5F6C
≈ Ragtime Blues
- 665566
≈ Fedora
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.80:1 · APCA Lc 83
Ag
Fail黒の上
WCAG 3.08:1 · APCA Lc 18
最適な文字色: #FFFFFF
WCAG 6.80:1 (AA) · APCA Lc 83
Contrast pairs
コードスニペット
CSS
:root {
--chocolate-chunk: #6b574a;
--chocolate-chunk-rgb: 107 87 74;
--chocolate-chunk-oklch: oklch(0.473 0.033 54.8);
}
.element {
color: var(--chocolate-chunk);
background-color: hsl(24 18% 35%);
border-color: oklch(0.473 0.033 54.8);
}Tailwind CSS v4
@theme {
--color-chocolate-chunk: #6b574a;
--color-chocolate-chunk-50: #fdf3ec;
--color-chocolate-chunk-100: #f1e5dd;
--color-chocolate-chunk-200: #e0d1c7;
--color-chocolate-chunk-300: #c5b3a7;
--color-chocolate-chunk-400: #af9a8c;
--color-chocolate-chunk-500: #988171;
--color-chocolate-chunk-600: #816d60;
--color-chocolate-chunk-700: #67574d;
--color-chocolate-chunk-800: #4c3f38;
--color-chocolate-chunk-900: #352c26;
--color-chocolate-chunk-950: #201915;
}SCSS
$chocolate-chunk: #6b574a;
$chocolate-chunk-rgb: 107, 87, 74;
$chocolate-chunk-light: mix(#fff, $chocolate-chunk, 20%);
$chocolate-chunk-dark: mix(#000, $chocolate-chunk, 20%);
.element {
color: $chocolate-chunk;
box-shadow: 0 0 0 2px rgba($chocolate-chunk, 0.35);
}