色名 · #AF7934
Butterbeer
Butterbeerは#AF7934：rgb(175 121 52)、hsl(34 54% 45%)、oklch(0.618 0.108 69.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Butterbeer color name →
#AF7934
oklch(0.618 0.108 69.8)
カラー変換
- HEX
- #af7934
- RGB
- rgb(175 121 52)
- HSL
- hsl(34 54% 45%)
- HWB
- hwb(34 20% 31%)
- OKLCH
- oklch(0.618 0.108 69.8)
- OKLab
- oklab(0.618 0.037 0.101)
- CIE Lab
- lab(55.54 16.93 45.28)
- LCH
- lch(55.54 48.34 69.5)
- CMYK
- cmyk(0% 31% 70% 31%)
ティント · シェード · トーン
ティント
- B7864B
- C09360
- C8A174
- D0AE88
- D8BB9B
- E0C9AF
- E8D6C3
- F0E4D7
- F7F1EB
シェード
- 98682C
- 815824
- 6B481C
- 563915
- 412B0E
- 2E1D07
- 1C1003
- 0B0501
- 010100
トーン
- AB7A3F
- A67B48
- A27C50
- 9D7D58
- 987E60
- 947E67
- 8F7F6D
- 8A7F74
- 85807A
カラーハーモニー
補色 +180°
- AF7934
Butterbeer
- 4F8AC4
≈ Blueberry Popover
類似色 -30° +30°
- AF7934
Butterbeer
- BC6E52
≈ Before Winter
- 95872F
≈ Lemon Ginger
トライアド +120° +240°
- AF7934
Butterbeer
- 009A94
≈ Columbia
- 9973B6
≈ Purple Pride
スプリットコンプリメンタリー +150° +210°
- AF7934
Butterbeer
- 1794B2
≈ Bondi Blue
- 797EC6
≈ Twilight Twinkle
テトラード +90° +180° +270°
- AF7934
Butterbeer
- 40996F
≈ Ocean Green
- 4F8AC4
≈ Blueberry Popover
- B16B9A
≈ Violetta
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.74:1 · APCA Lc 65
Ag
AA黒の上
WCAG 5.60:1 · APCA Lc 37
最適な文字色: #000000
WCAG 5.60:1 (AA) · APCA Lc 37
Contrast pairs
コードスニペット
CSS
:root {
--butterbeer: #af7934;
--butterbeer-rgb: 175 121 52;
--butterbeer-oklch: oklch(0.618 0.108 69.8);
}
.element {
color: var(--butterbeer);
background-color: hsl(34 54% 45%);
border-color: oklch(0.618 0.108 69.8);
}Tailwind CSS v4
@theme {
--color-butterbeer: #af7934;
--color-butterbeer-50: #fff1d4;
--color-butterbeer-100: #ffe3c1;
--color-butterbeer-200: #f2cda2;
--color-butterbeer-300: #daaf79;
--color-butterbeer-400: #c79353;
--color-butterbeer-500: #b37827;
--color-butterbeer-600: #986623;
--color-butterbeer-700: #7a511c;
--color-butterbeer-800: #5b3a13;
--color-butterbeer-900: #40280c;
--color-butterbeer-950: #281601;
}SCSS
$butterbeer: #af7934;
$butterbeer-rgb: 175, 121, 52;
$butterbeer-light: mix(#fff, $butterbeer, 20%);
$butterbeer-dark: mix(#000, $butterbeer, 20%);
.element {
color: $butterbeer;
box-shadow: 0 0 0 2px rgba($butterbeer, 0.35);
}