色名 · #A67A4C
Butter Caramel
Butter Caramelは#A67A4C：rgb(166 122 76)、hsl(31 37% 47%)、oklch(0.613 0.083 66.5)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Orange mean? → · Butter Caramel color name →
#A67A4C
oklch(0.613 0.083 66.5)
カラー変換
- HEX
- #a67a4c
- RGB
- rgb(166 122 76)
- HSL
- hsl(31 37% 47%)
- HWB
- hwb(31 30% 35%)
- OKLCH
- oklch(0.613 0.083 66.5)
- OKLab
- oklab(0.613 0.033 0.076)
- CIE Lab
- lab(54.94 13.7 32.07)
- LCH
- lch(54.94 34.87 66.9)
- CMYK
- cmyk(0% 27% 54% 35%)
ティント · シェード · トーン
ティント
- AF875E
- B8946F
- C1A181
- CAAE92
- D3BBA4
- DCC8B6
- E4D6C8
- EDE4DA
- F6F1EC
シェード
- 906941
- 7A5936
- 65492C
- 513A22
- 3E2B18
- 2B1D0F
- 1A1006
- 0A0502
- 010100
トーン
- A27B52
- 9F7C58
- 9B7C5E
- 977D63
- 947E68
- 907E6D
- 8C7F72
- 887F77
- 84807B
カラーハーモニー
補色 +180°
- A67A4C
Butter Caramel
- 5989B3
≈ Lichen Blue
類似色 -30° +30°
- A67A4C
Butter Caramel
- B07261
≈ Pinkish Brown
- 928447
≈ Lucky Bamboo
トライアド +120° +240°
- A67A4C
Butter Caramel
- 3F948C
≈ Highlands
- 9177AC
≈ Romantic Moment
スプリットコンプリメンタリー +150° +210°
- A67A4C
Butter Caramel
- 4090A4
≈ Winter Time
- 7780B6
≈ Astro Zinger
テトラード +90° +180° +270°
- A67A4C
Butter Caramel
- 58936F
≈ DaVanzo Green
- 5989B3
≈ Lichen Blue
- A47197
≈ Drama Queen
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.81:1 · APCA Lc 66
Ag
AA黒の上
WCAG 5.50:1 · APCA Lc 36
最適な文字色: #000000
WCAG 5.50:1 (AA) · APCA Lc 36
Contrast pairs
コードスニペット
CSS
:root {
--butter-caramel: #a67a4c;
--butter-caramel-rgb: 166 122 76;
--butter-caramel-oklch: oklch(0.613 0.083 66.5);
}
.element {
color: var(--butter-caramel);
background-color: hsl(31 37% 47%);
border-color: oklch(0.613 0.083 66.5);
}Tailwind CSS v4
@theme {
--color-butter-caramel: #a67a4c;
--color-butter-caramel-50: #fff1dc;
--color-butter-caramel-100: #fbe3cb;
--color-butter-caramel-200: #ecceaf;
--color-butter-caramel-300: #d4b08a;
--color-butter-caramel-400: #c09569;
--color-butter-caramel-500: #ab7b47;
--color-butter-caramel-600: #91683d;
--color-butter-caramel-700: #745330;
--color-butter-caramel-800: #563c22;
--color-butter-caramel-900: #3c2917;
--color-butter-caramel-950: #261708;
}SCSS
$butter-caramel: #a67a4c;
$butter-caramel-rgb: 166, 122, 76;
$butter-caramel-light: mix(#fff, $butter-caramel, 20%);
$butter-caramel-dark: mix(#000, $butter-caramel, 20%);
.element {
color: $butter-caramel;
box-shadow: 0 0 0 2px rgba($butter-caramel, 0.35);
}