Màu có tên · #B08A61
Caramel Kiss
Caramel Kiss là #B08A61: rgb(176 138 97), hsl(31 33% 54%), oklch(0.66 0.073 68.1). Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
What does Orange mean? → · Caramel Kiss color name →
#B08A61
oklch(0.66 0.073 68.1)
Chuyển đổi màu
- HEX
- #b08a61
- RGB
- rgb(176 138 97)
- HSL
- hsl(31 33% 54%)
- HWB
- hwb(31 38% 31%)
- OKLCH
- oklch(0.66 0.073 68.1)
- OKLab
- oklab(0.66 0.027 0.068)
- CIE Lab
- lab(60.43 10.97 27.76)
- LCH
- lch(60.43 29.85 68.4)
- CMYK
- cmyk(0% 22% 45% 31%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- B89570
- C0A180
- C8AC8F
- D0B89F
- D8C3AF
- DFCFBE
- E7DBCE
- EFE7DE
- F7F3EF
Sắc đậm
- 997753
- 826546
- 6C5339
- 56422D
- 423221
- 2E2215
- 1C140B
- 0B0703
- 010100
Sắc xám
- AB8965
- A78868
- A2876C
- 9D866F
- 988572
- 938475
- 8F8378
- 8A827B
- 85817D
Hòa sắc
Bổ túc +180°
- B08A61
Caramel Kiss
- 6E96BD
≈ Lupine Blue
Tương đồng -30° +30°
- B08A61
Caramel Kiss
- BA8372
≈ Western Pink
- 9E935E
≈ Tirol
Bộ ba +120° +240°
- B08A61
Caramel Kiss
- 59A19A
≈ Teal Bayou
- 9F86B5
≈ Peony Mauve
Bổ túc chia +150° +210°
- B08A61
Caramel Kiss
- 5B9DB0
≈ Flood Out
- 878EBF
≈ Soft Blue Lavender
Bộ bốn +90° +180° +270°
- B08A61
Caramel Kiss
- 6BA081
≈ Sea Lettuce
- 6E96BD
≈ Lupine Blue
- B081A2
≈ Antique Hot Pink
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 3.15:1 · APCA Lc 59
Ag
AATrên nền đen
WCAG 6.65:1 · APCA Lc 43
Màu chữ tốt nhất: #000000
WCAG 6.65:1 (AA) · APCA Lc 43
Contrast pairs
Đoạn mã
CSS
:root {
--caramel-kiss: #b08a61;
--caramel-kiss-rgb: 176 138 97;
--caramel-kiss-oklch: oklch(0.66 0.073 68.1);
}
.element {
color: var(--caramel-kiss);
background-color: hsl(31 33% 54%);
border-color: oklch(0.66 0.073 68.1);
}Tailwind CSS v4
@theme {
--color-caramel-kiss: #b08a61;
--color-caramel-kiss-50: #fff2df;
--color-caramel-kiss-100: #f8e4ce;
--color-caramel-kiss-200: #e9d0b3;
--color-caramel-kiss-300: #d0b28f;
--color-caramel-kiss-400: #bb9770;
--color-caramel-kiss-500: #a67d50;
--color-caramel-kiss-600: #8c6a44;
--color-caramel-kiss-700: #715536;
--color-caramel-kiss-800: #543d26;
--color-caramel-kiss-900: #3a2a1a;
--color-caramel-kiss-950: #24180a;
}SCSS
$caramel-kiss: #b08a61;
$caramel-kiss-rgb: 176, 138, 97;
$caramel-kiss-light: mix(#fff, $caramel-kiss, 20%);
$caramel-kiss-dark: mix(#000, $caramel-kiss, 20%);
.element {
color: $caramel-kiss;
box-shadow: 0 0 0 2px rgba($caramel-kiss, 0.35);
}