Benannte Farbe · #FF6B00
Spooky Tangerine
Spooky Tangerine ist #FF6B00: rgb(255 107 0), hsl(25 100% 50%), oklch(0.702 0.2 45.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Spooky Tangerine color name →
#FF6B00
oklch(0.702 0.2 45.1)
Farbumrechnungen
- HEX
- #ff6b00
- RGB
- rgb(255 107 0)
- HSL
- hsl(25 100% 50%)
- HWB
- hwb(25 0% 0%)
- OKLCH
- oklch(0.702 0.2 45.1)
- OKLab
- oklab(0.702 0.141 0.142)
- CIE Lab
- lab(63.99 54.94 73.01)
- LCH
- lch(63.99 91.37 53)
- CMYK
- cmyk(0% 58% 100% 0%)
Tints · Shades · Tones
Tints
- FF7C37
- FF8D54
- FF9C6C
- FFAB82
- FFBA97
- FFC8AC
- FFD6C1
- FFE4D6
- FFF1EA
Shades
- DE5C00
- BE4E00
- 9E3F00
- 803200
- 632500
- 481800
- 2E0D00
- 160400
- 030000
Tones
- F36F27
- E77339
- DB7646
- CF7951
- C27B5B
- B67D63
- A97E6B
- 9C7F73
- 8E8079
Farbharmonien
Komplementär +180°
- FF6B00
Spooky Tangerine
- 00AFDD
≈ Bright Cerulean
Analog -30° +30°
- FF6B00
Spooky Tangerine
- FF6178
≈ Kisses and Hugs
- D48F00
≈ Harvest Eve Gold
Triadisch +120° +240°
- FF6B00
Spooky Tangerine
- 00BB88
≈ Slime Girl
- 978DFF
≈ Lavender Blue Shadow
Geteilt komplementär +150° +210°
- FF6B00
Spooky Tangerine
- 00B6B6
≈ Swagger
- 55A1FF
≈ Âbi Blue
Tetradisch +90° +180° +270°
- FF6B00
Spooky Tangerine
- 62B912
≈ Field Green
- 00AFDD
≈ Bright Cerulean
- CD71F3
≈ Fake Love
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.85:1 · APCA Lc 54
Ag
AAAAuf Schwarz
WCAG 7.35:1 · APCA Lc 48
Beste Textfarbe: #000000
WCAG 7.35:1 (AAA) · APCA Lc 48
Contrast pairs
Code-Snippets
CSS
:root {
--spooky-tangerine: #ff6b00;
--spooky-tangerine-rgb: 255 107 0;
--spooky-tangerine-oklch: oklch(0.702 0.2 45.1);
}
.element {
color: var(--spooky-tangerine);
background-color: hsl(25 100% 50%);
border-color: oklch(0.702 0.2 45.1);
}Tailwind CSS v4
@theme {
--color-spooky-tangerine: #ff6b00;
--color-spooky-tangerine-50: #ffe4c4;
--color-spooky-tangerine-100: #ffd4ae;
--color-spooky-tangerine-200: #ffb988;
--color-spooky-tangerine-300: #ff9455;
--color-spooky-tangerine-400: #fa6e1b;
--color-spooky-tangerine-500: #e94500;
--color-spooky-tangerine-600: #c53c00;
--color-spooky-tangerine-700: #9e3000;
--color-spooky-tangerine-800: #772000;
--color-spooky-tangerine-900: #541600;
--color-spooky-tangerine-950: #380500;
}SCSS
$spooky-tangerine: #ff6b00;
$spooky-tangerine-rgb: 255, 107, 0;
$spooky-tangerine-light: mix(#fff, $spooky-tangerine, 20%);
$spooky-tangerine-dark: mix(#000, $spooky-tangerine, 20%);
.element {
color: $spooky-tangerine;
box-shadow: 0 0 0 2px rgba($spooky-tangerine, 0.35);
}