色名 · #AA8880
Bedford Brown
Bedford Brownは#AA8880：rgb(170 136 128)、hsl(11 20% 58%)、oklch(0.656 0.043 33.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Bedford Brown color name →
#AA8880
oklch(0.656 0.043 33.5)
カラー変換
- HEX
- #aa8880
- RGB
- rgb(170 136 128)
- HSL
- hsl(11 20% 58%)
- HWB
- hwb(11 50% 33%)
- OKLCH
- oklch(0.656 0.043 33.5)
- OKLab
- oklab(0.656 0.036 0.024)
- CIE Lab
- lab(59.8 12.45 9.49)
- LCH
- lch(59.8 15.65 37.3)
- CMYK
- cmyk(0% 20% 25% 33%)
ティント · シェード · トーン
ティント
- B2938C
- BB9F98
- C3AAA5
- CCB6B1
- D4C2BE
- DDCECA
- E5DAD7
- EEE6E4
- F6F3F2
シェード
- 93756E
- 7D635D
- 68524D
- 53413D
- 3F312E
- 2D221F
- 1B1312
- 0B0606
- 010101
トーン
- A68780
- A28780
- 9E8680
- 998580
- 958480
- 918380
- 8D8380
- 898280
- 848180
カラーハーモニー
補色 +180°
- AA8880
Bedford Brown
- 7398A1
≈ Cameo Blue
類似色 -30° +30°
- AA8880
Bedford Brown
- A9868E
≈ Fig Fruit Mauve
- A58C76
≈ Natural
トライアド +120° +240°
- AA8880
Bedford Brown
- 7D9985
≈ Parisian Patina
- 8890AC
≈ Papilio Argeotus
スプリットコンプリメンタリー +150° +210°
- AA8880
Bedford Brown
- 749A94
≈ Avalon
- 7B95AA
≈ Nordland Blue
テトラード +90° +180° +270°
- AA8880
Bedford Brown
- 8C9679
≈ Leafy Rise
- 7398A1
≈ Cameo Blue
- 968BA7
≈ Smoky Mauve
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.20:1 · APCA Lc 59
Ag
AA黒の上
WCAG 6.54:1 · APCA Lc 42
最適な文字色: #000000
WCAG 6.54:1 (AA) · APCA Lc 42
Contrast pairs
コードスニペット
CSS
:root {
--bedford-brown: #aa8880;
--bedford-brown-rgb: 170 136 128;
--bedford-brown-oklch: oklch(0.656 0.043 33.5);
}
.element {
color: var(--bedford-brown);
background-color: hsl(11 20% 58%);
border-color: oklch(0.656 0.043 33.5);
}Tailwind CSS v4
@theme {
--color-bedford-brown: #aa8880;
--color-bedford-brown-50: #fff1ed;
--color-bedford-brown-100: #f6e3de;
--color-bedford-brown-200: #e6cec8;
--color-bedford-brown-300: #ccb0a8;
--color-bedford-brown-400: #b7968e;
--color-bedford-brown-500: #a17c74;
--color-bedford-brown-600: #886962;
--color-bedford-brown-700: #6d544e;
--color-bedford-brown-800: #503d39;
--color-bedford-brown-900: #382a27;
--color-bedford-brown-950: #231715;
}SCSS
$bedford-brown: #aa8880;
$bedford-brown-rgb: 170, 136, 128;
$bedford-brown-light: mix(#fff, $bedford-brown, 20%);
$bedford-brown-dark: mix(#000, $bedford-brown, 20%);
.element {
color: $bedford-brown;
box-shadow: 0 0 0 2px rgba($bedford-brown, 0.35);
}