Adlandırılmış renk · #D87C3B
Sweet Potato
Sweet Potato, #D87C3B: rgb(216 124 59), hsl(25 67% 54%), oklch(0.676 0.139 53). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Sweet Potato color name →
#D87C3B
oklch(0.676 0.139 53)
Renk dönüşümleri
- HEX
- #d87c3b
- RGB
- rgb(216 124 59)
- HSL
- hsl(25 67% 54%)
- HWB
- hwb(25 23% 15%)
- OKLCH
- oklch(0.676 0.139 53)
- OKLab
- oklab(0.676 0.083 0.111)
- CIE Lab
- lab(61.65 32.95 50.23)
- LCH
- lch(61.65 60.07 56.7)
- CMYK
- cmyk(0% 43% 73% 15%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- DD8A52
- E29766
- E7A47A
- EBB18D
- EFBEA0
- F3CBB3
- F6D8C6
- F9E5D9
- FCF2EC
Koyu tonlar
- BC6B32
- A05A29
- 854A21
- 6B3B19
- 532C11
- 3B1E09
- 251104
- 110501
- 020100
Gri tonlar
- D07D45
- C77E4E
- BF7F56
- B6805D
- AD8064
- A5806A
- 9C8170
- 938176
- 89807B
Renk uyumları
Tamamlayıcı +180°
- D87C3B
Sweet Potato
- 07A4DE
≈ Vanadyl Blue
Analog -30° +30°
- D87C3B
Sweet Potato
- DF716E
≈ Childhood Crush
- C08D02
≈ Moutarde de Bénichon
Üçlü +120° +240°
- D87C3B
Sweet Potato
- 00B08F
≈ Victorian Greenhouse
- 9B85E4
≈ Perrywinkle
Bölünmüş tamamlayıcı +150° +210°
- D87C3B
Sweet Potato
- 00ABB6
≈ Bluebird
- 6995EC
≈ Guilliman Blue
Dörtlü +90° +180° +270°
- D87C3B
Sweet Potato
- 5FAC5B
≈ Techno Green
- 07A4DE
≈ Vanadyl Blue
- BF78C8
≈ Gulābī Pink
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 3.05:1 · APCA Lc 57
Ag
AASiyah üzerinde
WCAG 6.86:1 · APCA Lc 45
En iyi metin rengi: #000000
WCAG 6.86:1 (AA) · APCA Lc 45
Contrast pairs
Kod parçacıkları
CSS
:root {
--sweet-potato: #d87c3b;
--sweet-potato-rgb: 216 124 59;
--sweet-potato-oklch: oklch(0.676 0.139 53);
}
.element {
color: var(--sweet-potato);
background-color: hsl(25 67% 54%);
border-color: oklch(0.676 0.139 53);
}Tailwind CSS v4
@theme {
--color-sweet-potato: #d87c3b;
--color-sweet-potato-50: #ffecd0;
--color-sweet-potato-100: #ffddbc;
--color-sweet-potato-200: #ffc59b;
--color-sweet-potato-300: #eea471;
--color-sweet-potato-400: #dd8549;
--color-sweet-potato-500: #cb6710;
--color-sweet-potato-600: #ab5813;
--color-sweet-potato-700: #8a4610;
--color-sweet-potato-800: #67320b;
--color-sweet-potato-900: #482207;
--color-sweet-potato-950: #2f1000;
}SCSS
$sweet-potato: #d87c3b;
$sweet-potato-rgb: 216, 124, 59;
$sweet-potato-light: mix(#fff, $sweet-potato, 20%);
$sweet-potato-dark: mix(#000, $sweet-potato, 20%);
.element {
color: $sweet-potato;
box-shadow: 0 0 0 2px rgba($sweet-potato, 0.35);
}