色名 · #5A3D29
Peat Brown
Peat Brownは#5A3D29：rgb(90 61 41)、hsl(24 37% 26%)、oklch(0.388 0.052 55.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Brown mean? → · Peat Brown color name →
#5A3D29
oklch(0.388 0.052 55.2)
カラー変換
- HEX
- #5a3d29
- RGB
- rgb(90 61 41)
- HSL
- hsl(24 37% 26%)
- HWB
- hwb(24 16% 65%)
- OKLCH
- oklch(0.388 0.052 55.2)
- OKLab
- oklab(0.388 0.029 0.042)
- CIE Lab
- lab(28.78 11.21 17.66)
- LCH
- lch(28.78 20.91 57.6)
- CMYK
- cmyk(0% 32% 54% 65%)
ティント · シェード · トーン
ティント
- 6A4E3C
- 796050
- 897364
- 998578
- AA998E
- BAACA3
- CBC1BA
- DCD5D0
- EEEAE7
シェード
- 4D3422
- 412B1C
- 352215
- 291A0F
- 1E1209
- 130A05
- 090402
- 030101
- 000000
トーン
- 5E4432
- 624A3A
- 665143
- 6A574B
- 6E5E54
- 71655C
- 756B65
- 79726E
- 7C7977
カラーハーモニー
補色 +180°
- 5A3D29
Peat Brown
- 27495C
≈ Arapawa
類似色 -30° +30°
- 5A3D29
Peat Brown
- 5D3936
≈ Taxite
- 514223
≈ Clove Yellow Brown
トライアド +120° +240°
- 5A3D29
Peat Brown
- 234E43
≈ Blackboard Green
- 463F5D
≈ Mulberry Mauve Black
スプリットコンプリメンタリー +150° +210°
- 5A3D29
Peat Brown
- 1D4C52
≈ Hurricane Green Blue
- 374460
≈ Diplomatic
テトラード +90° +180° +270°
- 5A3D29
Peat Brown
- 334C33
≈ Nettle Green
- 27495C
≈ Arapawa
- 533B54
≈ Amethyst Dark Violet
コントラストとアクセシビリティ
Ag
AAA白の上
WCAG 9.83:1 · APCA Lc 93
Ag
Fail黒の上
WCAG 2.13:1 · APCA Lc 10
最適な文字色: #FFFFFF
WCAG 9.83:1 (AAA) · APCA Lc 93
Contrast pairs
コードスニペット
CSS
:root {
--peat-brown: #5a3d29;
--peat-brown-rgb: 90 61 41;
--peat-brown-oklch: oklch(0.388 0.052 55.2);
}
.element {
color: var(--peat-brown);
background-color: hsl(24 37% 26%);
border-color: oklch(0.388 0.052 55.2);
}Tailwind CSS v4
@theme {
--color-peat-brown: #5a3d29;
--color-peat-brown-50: #fff2e7;
--color-peat-brown-100: #f6e4d8;
--color-peat-brown-200: #e6cfbf;
--color-peat-brown-300: #cdb19e;
--color-peat-brown-400: #b79782;
--color-peat-brown-500: #a27e65;
--color-peat-brown-600: #896a56;
--color-peat-brown-700: #6d5545;
--color-peat-brown-800: #513e32;
--color-peat-brown-900: #382a22;
--color-peat-brown-950: #231811;
}SCSS
$peat-brown: #5a3d29;
$peat-brown-rgb: 90, 61, 41;
$peat-brown-light: mix(#fff, $peat-brown, 20%);
$peat-brown-dark: mix(#000, $peat-brown, 20%);
.element {
color: $peat-brown;
box-shadow: 0 0 0 2px rgba($peat-brown, 0.35);
}