Màu có tên · #DE954B
Orange Caramel
Orange Caramel là #DE954B: rgb(222 149 75), hsl(30 69% 58%), oklch(0.729 0.126 63.8). 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? → · Orange Caramel color name →
#DE954B
oklch(0.729 0.126 63.8)
Chuyển đổi màu
- HEX
- #de954b
- RGB
- rgb(222 149 75)
- HSL
- hsl(30 69% 58%)
- HWB
- hwb(30 29% 13%)
- OKLCH
- oklch(0.729 0.126 63.8)
- OKLab
- oklab(0.729 0.055 0.113)
- CIE Lab
- lab(68.19 23.33 49.73)
- LCH
- lch(68.19 54.93 64.9)
- CMYK
- cmyk(0% 33% 66% 13%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- E2A060
- E6AB73
- EAB585
- EDC097
- F1CAA8
- F4D5BA
- F7DFCB
- FAEADC
- FCF4EE
Sắc đậm
- C18140
- A56D35
- 895A2B
- 6F4821
- 553717
- 3D260E
- 261606
- 120802
- 020100
Sắc xám
- D59353
- CB925A
- C29060
- B98E66
- AF8C6B
- A68A70
- 9D8774
- 938579
- 8A837C
Hòa sắc
Bổ túc +180°
- DE954B
Orange Caramel
- 5AAFF0
≈ Blue Jeans
Tương đồng -30° +30°
- DE954B
Orange Caramel
- EB8972
≈ Thundelarra
- C2A53D
≈ Deadsy
Bộ ba +120° +240°
- DE954B
Orange Caramel
- 1AC1B0
≈ Turquoise
- B893E8
≈ Bright Lavender
Bổ túc chia +150° +210°
- DE954B
Orange Caramel
- 13BBD7
≈ Maldives
- 8FA1F6
≈ Cold Lips
Bộ bốn +90° +180° +270°
- DE954B
Orange Caramel
- 61BE82
≈ Spearmint Burst
- 5AAFF0
≈ Blue Jeans
- D788C8
≈ Pink Punk
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 2.46:1 · APCA Lc 48
Ag
AAATrên nền đen
WCAG 8.50:1 · APCA Lc 54
Màu chữ tốt nhất: #000000
WCAG 8.50:1 (AAA) · APCA Lc 54
Contrast pairs
Đoạn mã
CSS
:root {
--orange-caramel: #de954b;
--orange-caramel-rgb: 222 149 75;
--orange-caramel-oklch: oklch(0.729 0.126 63.8);
}
.element {
color: var(--orange-caramel);
background-color: hsl(30 69% 58%);
border-color: oklch(0.729 0.126 63.8);
}Tailwind CSS v4
@theme {
--color-orange-caramel: #de954b;
--color-orange-caramel-50: #ffefd0;
--color-orange-caramel-100: #ffe0bc;
--color-orange-caramel-200: #faca9b;
--color-orange-caramel-300: #e4aa70;
--color-orange-caramel-400: #d28d48;
--color-orange-caramel-500: #bf7109;
--color-orange-caramel-600: #a1600f;
--color-orange-caramel-700: #814d0d;
--color-orange-caramel-800: #613709;
--color-orange-caramel-900: #442506;
--color-orange-caramel-950: #2c1400;
}SCSS
$orange-caramel: #de954b;
$orange-caramel-rgb: 222, 149, 75;
$orange-caramel-light: mix(#fff, $orange-caramel, 20%);
$orange-caramel-dark: mix(#000, $orange-caramel, 20%);
.element {
color: $orange-caramel;
box-shadow: 0 0 0 2px rgba($orange-caramel, 0.35);
}