色名 · #6D4B3F
Brooklyn Brownstone
Brooklyn Brownstoneは#6D4B3F：rgb(109 75 63)、hsl(16 27% 34%)、oklch(0.447 0.051 40.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Brooklyn Brownstone color name →
#6D4B3F
oklch(0.447 0.051 40.3)
カラー変換
- HEX
- #6d4b3f
- RGB
- rgb(109 75 63)
- HSL
- hsl(16 27% 34%)
- HWB
- hwb(16 25% 57%)
- OKLCH
- oklch(0.447 0.051 40.3)
- OKLab
- oklab(0.447 0.039 0.033)
- CIE Lab
- lab(35.49 13.65 13.24)
- LCH
- lch(35.49 19.02 44.1)
- CMYK
- cmyk(0% 31% 42% 57%)
ティント · シェード · トーン
ティント
- 7B5B50
- 896C62
- 987D74
- A68F87
- B4A19A
- C3B3AD
- D2C6C1
- E1D8D6
- F0ECEA
シェード
- 5E4035
- 4F352C
- 412B23
- 33211B
- 261712
- 190E0A
- 0D0604
- 040201
- 010000
トーン
- 6F5045
- 71564C
- 735B52
- 756059
- 77655F
- 796B66
- 7B706C
- 7D7573
- 7E7B79
カラーハーモニー
補色 +180°
- 6D4B3F
Brooklyn Brownstone
- 325B68
≈ Night Shift
類似色 -30° +30°
- 6D4B3F
Brooklyn Brownstone
- 6D494E
≈ Formal Maroon
- 675035
≈ Wild Chocolate
トライアド +120° +240°
- 6D4B3F
Brooklyn Brownstone
- 3B5D4B
≈ Amish Green
- 4F5170
≈ Independence
スプリットコンプリメンタリー +150° +210°
- 6D4B3F
Brooklyn Brownstone
- 305E5B
≈ Royal Pine
- 3F5770
≈ Inlet Harbour
テトラード +90° +180° +270°
- 6D4B3F
Brooklyn Brownstone
- 4B5A3C
≈ Knarloc Green
- 325B68
≈ Night Shift
- 5D4D6A
≈ Blackcurrant Elixir
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 7.69:1 · APCA Lc 87
Ag
Fail黒の上
WCAG 2.72:1 · APCA Lc 15
最適な文字色: #FFFFFF
WCAG 7.69:1 (AAA) · APCA Lc 87
Contrast pairs
コードスニペット
CSS
:root {
--brooklyn-brownstone: #6d4b3f;
--brooklyn-brownstone-rgb: 109 75 63;
--brooklyn-brownstone-oklch: oklch(0.447 0.051 40.3);
}
.element {
color: var(--brooklyn-brownstone);
background-color: hsl(16 27% 34%);
border-color: oklch(0.447 0.051 40.3);
}Tailwind CSS v4
@theme {
--color-brooklyn-brownstone: #6d4b3f;
--color-brooklyn-brownstone-50: #fff1ea;
--color-brooklyn-brownstone-100: #f8e3db;
--color-brooklyn-brownstone-200: #e8cec4;
--color-brooklyn-brownstone-300: #cfb0a3;
--color-brooklyn-brownstone-400: #ba9588;
--color-brooklyn-brownstone-500: #a47b6d;
--color-brooklyn-brownstone-600: #8b685c;
--color-brooklyn-brownstone-700: #6f534a;
--color-brooklyn-brownstone-800: #523d36;
--color-brooklyn-brownstone-900: #392a25;
--color-brooklyn-brownstone-950: #241713;
}SCSS
$brooklyn-brownstone: #6d4b3f;
$brooklyn-brownstone-rgb: 109, 75, 63;
$brooklyn-brownstone-light: mix(#fff, $brooklyn-brownstone, 20%);
$brooklyn-brownstone-dark: mix(#000, $brooklyn-brownstone, 20%);
.element {
color: $brooklyn-brownstone;
box-shadow: 0 0 0 2px rgba($brooklyn-brownstone, 0.35);
}