色名 · #BB5533
Beef Patties
Beef Pattiesは#BB5533：rgb(187 85 51)、hsl(15 57% 47%)、oklch(0.572 0.141 38.7)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Beef Patties color name →
#BB5533
oklch(0.572 0.141 38.7)
カラー変換
- HEX
- #bb5533
- RGB
- rgb(187 85 51)
- HSL
- hsl(15 57% 47%)
- HWB
- hwb(15 20% 27%)
- OKLCH
- oklch(0.572 0.141 38.7)
- OKLab
- oklab(0.572 0.11 0.088)
- CIE Lab
- lab(49.22 40.43 39.89)
- LCH
- lch(49.22 56.8 44.6)
- CMYK
- cmyk(0% 55% 73% 27%)
ティント · シェード · トーン
ティント
- C46749
- CC785D
- D38971
- DB9A85
- E2AA98
- E8BBAD
- EFCCC1
- F4DDD5
- FAEEEA
シェード
- A2492B
- 8A3D23
- 73311C
- 5C2614
- 461C0D
- 321107
- 1F0803
- 0D0201
- 020000
トーン
- B65B3D
- B16046
- AC654E
- A66956
- A16E5D
- 9B7264
- 95766B
- 8E7972
- 877D79
カラーハーモニー
補色 +180°
- BB5533
Beef Patties
- 0086A1
≈ Blue Arc
類似色 -30° +30°
- BB5533
Beef Patties
- BA4F67
≈ Tulip Red
- A76800
≈ Butter Fudge
トライアド +120° +240°
- BB5533
Beef Patties
- 008F5A
≈ Emerald Isle
- 676CC9
≈ C64 Purple
スプリットコンプリメンタリー +150° +210°
- BB5533
Beef Patties
- 008A83
≈ Clear Turquoise
- 227CC6
≈ Skylla
テトラード +90° +180° +270°
- BB5533
Beef Patties
- 5E8719
≈ Weeping Fig
- 0086A1
≈ Blue Arc
- 905EB6
≈ Lusty Lavender
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 4.70:1 · APCA Lc 72
Ag
Fail黒の上
WCAG 4.46:1 · APCA Lc 30
最適な文字色: #FFFFFF
WCAG 4.70:1 (AA) · APCA Lc 72
Contrast pairs
コードスニペット
CSS
:root {
--beef-patties: #bb5533;
--beef-patties-rgb: 187 85 51;
--beef-patties-oklch: oklch(0.572 0.141 38.7);
}
.element {
color: var(--beef-patties);
background-color: hsl(15 57% 47%);
border-color: oklch(0.572 0.141 38.7);
}Tailwind CSS v4
@theme {
--color-beef-patties: #bb5533;
--color-beef-patties-50: #ffe9d7;
--color-beef-patties-100: #ffd9c5;
--color-beef-patties-200: #ffc1a6;
--color-beef-patties-300: #f59e7f;
--color-beef-patties-400: #e47f5e;
--color-beef-patties-500: #d15f38;
--color-beef-patties-600: #b15131;
--color-beef-patties-700: #8e4027;
--color-beef-patties-800: #6a2e1c;
--color-beef-patties-900: #4b1f13;
--color-beef-patties-950: #310e05;
}SCSS
$beef-patties: #bb5533;
$beef-patties-rgb: 187, 85, 51;
$beef-patties-light: mix(#fff, $beef-patties, 20%);
$beef-patties-dark: mix(#000, $beef-patties, 20%);
.element {
color: $beef-patties;
box-shadow: 0 0 0 2px rgba($beef-patties, 0.35);
}