色名 · #7A5546
Roxy Brown
Roxy Brownは#7A5546：rgb(122 85 70)、hsl(17 27% 38%)、oklch(0.485 0.055 43)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Roxy Brown color name →
#7A5546
oklch(0.485 0.055 43)
カラー変換
- HEX
- #7a5546
- RGB
- rgb(122 85 70)
- HSL
- hsl(17 27% 38%)
- HWB
- hwb(17 27% 52%)
- OKLCH
- oklch(0.485 0.055 43)
- OKLab
- oklab(0.485 0.04 0.037)
- CIE Lab
- lab(39.94 14.35 15.22)
- LCH
- lch(39.94 20.92 46.7)
- CMYK
- cmyk(0% 30% 43% 52%)
ティント · シェード · トーン
ティント
- 876557
- 947568
- A1857A
- AE968C
- BCA69E
- C9B8B1
- D6C9C4
- E4DBD7
- F1EDEB
シェード
- 69493C
- 593D32
- 493128
- 3A261E
- 2B1C15
- 1D110D
- 100805
- 050202
- 010000
トーン
- 7B594C
- 7C5E52
- 7D6257
- 7D665D
- 7E6B63
- 7F6F69
- 7F736E
- 7F7774
- 807C7A
カラーハーモニー
補色 +180°
- 7A5546
Roxy Brown
- 3A6676
≈ Barbados
類似色 -30° +30°
- 7A5546
Roxy Brown
- 7B5256
≈ Deep Rhubarb
- 725A3C
≈ Bee Master
トライアド +120° +240°
- 7A5546
Roxy Brown
- 416956
≈ June Ivy
- 5A5B7E
≈ Deep Lavender
スプリットコンプリメンタリー +150° +210°
- 7A5546
Roxy Brown
- 366968
≈ Betta Fish
- 49617E
≈ Parlour Blue
テトラード +90° +180° +270°
- 7A5546
Roxy Brown
- 536646
≈ Jalapeño Bouquet
- 3A6676
≈ Barbados
- 6A5676
≈ Basil Mauve
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.53:1 · APCA Lc 82
Ag
Fail黒の上
WCAG 3.21:1 · APCA Lc 20
最適な文字色: #FFFFFF
WCAG 6.53:1 (AA) · APCA Lc 82
Contrast pairs
コードスニペット
CSS
:root {
--roxy-brown: #7a5546;
--roxy-brown-rgb: 122 85 70;
--roxy-brown-oklch: oklch(0.485 0.055 43);
}
.element {
color: var(--roxy-brown);
background-color: hsl(17 27% 38%);
border-color: oklch(0.485 0.055 43);
}Tailwind CSS v4
@theme {
--color-roxy-brown: #7a5546;
--color-roxy-brown-50: #fff1e8;
--color-roxy-brown-100: #f9e3d9;
--color-roxy-brown-200: #e9cec1;
--color-roxy-brown-300: #d0afa1;
--color-roxy-brown-400: #bb9485;
--color-roxy-brown-500: #a67b69;
--color-roxy-brown-600: #8c6859;
--color-roxy-brown-700: #705347;
--color-roxy-brown-800: #533c34;
--color-roxy-brown-900: #3a2923;
--color-roxy-brown-950: #241712;
}SCSS
$roxy-brown: #7a5546;
$roxy-brown-rgb: 122, 85, 70;
$roxy-brown-light: mix(#fff, $roxy-brown, 20%);
$roxy-brown-dark: mix(#000, $roxy-brown, 20%);
.element {
color: $roxy-brown;
box-shadow: 0 0 0 2px rgba($roxy-brown, 0.35);
}