色名 · #BB8F4F
Bugle Boy
Bugle Boyは#BB8F4F：rgb(187 143 79)、hsl(36 44% 52%)、oklch(0.679 0.098 75.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Bugle Boy color name →
#BB8F4F
oklch(0.679 0.098 75.2)
カラー変換
- HEX
- #bb8f4f
- RGB
- rgb(187 143 79)
- HSL
- hsl(36 44% 52%)
- HWB
- hwb(36 31% 27%)
- OKLCH
- oklch(0.679 0.098 75.2)
- OKLab
- oklab(0.679 0.025 0.094)
- CIE Lab
- lab(62.69 11.83 40.33)
- LCH
- lch(62.69 42.03 73.7)
- CMYK
- cmyk(0% 24% 58% 27%)
ティント · シェード · トーン
ティント
- C29A62
- C9A573
- D0B085
- D7BB96
- DDC6A8
- E4D2B9
- EBDDCA
- F2E8DC
- F8F4ED
シェード
- A27C44
- 8A6938
- 73572E
- 5C4523
- 463419
- 322410
- 1F1507
- 0D0702
- 020100
トーン
- B58E56
- AF8C5C
- A98B61
- A48A66
- 9E886B
- 988770
- 928574
- 8C8378
- 86827C
カラーハーモニー
補色 +180°
- BB8F4F
Bugle Boy
- 6E9AD3
≈ Sea Loch
類似色 -30° +30°
- BB8F4F
Bugle Boy
- CA8464
≈ Cabana Melon
- A19B50
≈ Formosan Green
トライアド +120° +240°
- BB8F4F
Bugle Boy
- 3DABAB
≈ Pluto
- AF85C1
≈ African Violet
スプリットコンプリメンタリー +150° +210°
- BB8F4F
Bugle Boy
- 4BA4C5
≈ Oasis Spring
- 928FD2
≈ Adora
テトラード +90° +180° +270°
- BB8F4F
Bugle Boy
- 57AB89
≈ O’grady Green
- 6E9AD3
≈ Sea Loch
- C37FA5
≈ Moonlight Mauve
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.93:1 · APCA Lc 56
Ag
AAA黒の上
WCAG 7.15:1 · APCA Lc 46
最適な文字色: #000000
WCAG 7.15:1 (AAA) · APCA Lc 46
Contrast pairs
コードスニペット
CSS
:root {
--bugle-boy: #bb8f4f;
--bugle-boy-rgb: 187 143 79;
--bugle-boy-oklch: oklch(0.679 0.098 75.2);
}
.element {
color: var(--bugle-boy);
background-color: hsl(36 44% 52%);
border-color: oklch(0.679 0.098 75.2);
}Tailwind CSS v4
@theme {
--color-bugle-boy: #bb8f4f;
--color-bugle-boy-50: #fff2d7;
--color-bugle-boy-100: #fbe4c4;
--color-bugle-boy-200: #ecd0a6;
--color-bugle-boy-300: #d4b17e;
--color-bugle-boy-400: #c0965a;
--color-bugle-boy-500: #ac7c32;
--color-bugle-boy-600: #91692c;
--color-bugle-boy-700: #745423;
--color-bugle-boy-800: #573d18;
--color-bugle-boy-900: #3d2a0f;
--color-bugle-boy-950: #261703;
}SCSS
$bugle-boy: #bb8f4f;
$bugle-boy-rgb: 187, 143, 79;
$bugle-boy-light: mix(#fff, $bugle-boy, 20%);
$bugle-boy-dark: mix(#000, $bugle-boy, 20%);
.element {
color: $bugle-boy;
box-shadow: 0 0 0 2px rgba($bugle-boy, 0.35);
}