色名 · #6F4B3E
Burned Brown
Burned Brownは#6F4B3E：rgb(111 75 62)、hsl(16 28% 34%)、oklch(0.449 0.054 40.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Burned Brown color name →
#6F4B3E
oklch(0.449 0.054 40.7)
カラー変換
- HEX
- #6f4b3e
- RGB
- rgb(111 75 62)
- HSL
- hsl(16 28% 34%)
- HWB
- hwb(16 24% 56%)
- OKLCH
- oklch(0.449 0.054 40.7)
- OKLab
- oklab(0.449 0.041 0.035)
- CIE Lab
- lab(35.74 14.46 14.24)
- LCH
- lch(35.74 20.3 44.6)
- CMYK
- cmyk(0% 32% 44% 56%)
ティント · シェード · トーン
ティント
- 7D5B4F
- 8B6C61
- 997D74
- A78F86
- B6A199
- C4B3AD
- D3C6C1
- E1D8D5
- F0ECEA
シェード
- 604035
- 51352B
- 422B23
- 34211A
- 271712
- 1A0E0A
- 0E0604
- 040201
- 010000
トーン
- 715044
- 73564B
- 755B51
- 776058
- 78655F
- 7A6B65
- 7C706C
- 7D7573
- 7F7B79
カラーハーモニー
補色 +180°
- 6F4B3E
Burned Brown
- 305C6A
≈ Night Shift
類似色 -30° +30°
- 6F4B3E
Burned Brown
- 6F494E
≈ Formal Maroon
- 685033
≈ Wild Chocolate
トライアド +120° +240°
- 6F4B3E
Burned Brown
- 395E4B
≈ Wine Leaf
- 4F5273
≈ Deep Orchid
スプリットコンプリメンタリー +150° +210°
- 6F4B3E
Burned Brown
- 2D5F5C
≈ Verdant Forest
- 3E5772
≈ Hidden Sapphire
テトラード +90° +180° +270°
- 6F4B3E
Burned Brown
- 4B5B3C
≈ Knarloc Green
- 305C6A
≈ Night Shift
- 5F4D6B
≈ Futaai Indigo
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.63:1 · APCA Lc 86
Ag
Fail黒の上
WCAG 2.75:1 · APCA Lc 16
最適な文字色: #FFFFFF
WCAG 7.63:1 (AAA) · APCA Lc 86
Contrast pairs
コードスニペット
CSS
:root {
--burned-brown: #6f4b3e;
--burned-brown-rgb: 111 75 62;
--burned-brown-oklch: oklch(0.449 0.054 40.7);
}
.element {
color: var(--burned-brown);
background-color: hsl(16 28% 34%);
border-color: oklch(0.449 0.054 40.7);
}Tailwind CSS v4
@theme {
--color-burned-brown: #6f4b3e;
--color-burned-brown-50: #fff1e9;
--color-burned-brown-100: #f9e3da;
--color-burned-brown-200: #e9cdc2;
--color-burned-brown-300: #d0afa2;
--color-burned-brown-400: #bb9487;
--color-burned-brown-500: #a67b6b;
--color-burned-brown-600: #8c685b;
--color-burned-brown-700: #705348;
--color-burned-brown-800: #533c35;
--color-burned-brown-900: #3a2924;
--color-burned-brown-950: #241713;
}SCSS
$burned-brown: #6f4b3e;
$burned-brown-rgb: 111, 75, 62;
$burned-brown-light: mix(#fff, $burned-brown, 20%);
$burned-brown-dark: mix(#000, $burned-brown, 20%);
.element {
color: $burned-brown;
box-shadow: 0 0 0 2px rgba($burned-brown, 0.35);
}