Tangerine #f28500

Orange with the peel still fragrant.

RGB

242, 133, 0

HSL

33°, 100%, 48%

CMYK

0, 45, 100, 5

Luminance

0.3565

About Tangerine

Tangerine, #f28500, is orange at citrus peak — brighter and more red than standard orange, named for the small sweet fruit shipped from Tangier. It is orange with the volume of a fresh peel.

History

Tangerines reached Europe through the Moroccan port that named them; the color rode Op Art, 1960s fashion and Led Zeppelin lyrics into vividness. "Tangerine Dream" gave it psychedelic residency.

Psychology

Tangerine reads energetic, zesty and warm — orange’s friendliness turned up and sharpened. It signals vitality and freshness with more punch than amber or peach.

In design

Tangerine is a vivid accent and CTA: strong on charcoal and teal, borderline body text (2.6:1). Pair with teal and navy (complement), cream and chocolate. Sports, beverage and energetic-lifestyle brands deploy it.

In culture

Tangerine Dream, tangerine trees and marmalade skies, the fruit named for a port: citrus, psychedelia and geography in one warm word.

Brands that own tangerine

Nickelodeon kin#f57d0d Fanta kin#ff7e00 Sports drinks#f28500 Op Art revival#ff7a1a Citrus branding#f47216

Shades of tangerine

Orange Amber Coral Persimmon Marigold Pumpkin Tomato Burnt orange

Every format

HEX	#f28500
RGB	rgb(242, 133, 0)
HSL	hsl(33, 100%, 48%)
CMYK	cmyk(0%, 45%, 100%, 5%)
LAB	lab(66.3 35.2 72.6)
LCH	lch(66.3 80.7 64.2)
OKLCH	oklch(0.722 0.172 58.5)

Copy-ready code

/* CSS */
color: #f28500;
background-color: #f28500;
/* Tailwind (arbitrary) */
class="text-[#f28500] bg-[#f28500]"
/* SCSS */
$brand: #f28500;
/* SwiftUI */
Color(red: 0.949, green: 0.522, blue: 0.000)
/* Android */
Color.parseColor("#f28500")

Accessibility — WCAG contrast

#f28500 on white: 2.58:1

AA ✗ fail · AA-large ✗ · AAA ✗

#f28500 on black: 8.13:1

AA ✓ pass · AA-large ✓ · AAA ✓

true color

protanopia

deuteranopia

tritanopia

RGB percentages

Red94.9%

Green52.2%

Blue0.0%

CMYK percentages

Cyan0.0%

Magenta45.0%

Yellow100.0%

Key (black)5.1%

Color previews

#f28500 text on a black background

contrast 8.13:1

Card sample

#f28500 text on a white background

contrast 2.58:1

Card sample

CSS3 live lab

Text font color

The quick brown fox

color: #f28500;

Background color

Panel with #f28500 background

background-color: #f28500;

Text shadow — hex

Glowing headline

text-shadow: 2px 2px 8px #f28500;

Text shadow — RGB

Soft neon halo

text-shadow: 0 0 14px rgba(242, 133, 0, 0.45);

Div box shadow

Elevated card

box-shadow: 0 12px 32px -8px rgba(242, 133, 0, 0.45);

Border & gradient

Gradient panel

border: 3px solid #f28500;
background: linear-gradient(135deg, #f28500, #BEF200);

Monochromatic scale

#3D2200 #854900 #CC7000 #FF9514 #FFB65C #FFD6A3 #FFEDD6

Palettes built from #f28500

UI palette

Gradient stops

Accent trio

Warm–cool bridge

Shades — darker

#DA7800 #C26B00 #AA5D00 #915000 #794300 #613500 #492800 #301B00 #180D00

Tints — lighter

#FF930E #FF9F29 #FFAB44 #FFB75E #FFC379 #FFCF94 #FFDBAF #FFE7C9 #FFF3E4

Hue & tone neighbors

#F23400 #F25D00 #F2AE00 #F2D600 #FF9D26 #BF6900 #F28500 #DA8318

Color harmonies

Complement

Split-complement

Analogous

Triadic

Tetradic

Nearest named colors

orange · ΔE 15.6 chocolate · ΔE 19.0 coral · ΔE 27.1 peru · ΔE 28.6 tomato · ΔE 34.9

Tangerine, answered

What is the hex code for tangerine?

Tangerine is #f28500 — a vivid red-leaning orange, brighter than standard orange #ffa500.

Tangerine vs orange?

Tangerine is more saturated and slightly redder — the fruit at peak ripeness versus the generic hue.

What pairs with tangerine?

Teal and navy (complement), cream and chocolate (warmth), charcoal to make it glow alone.

Work with #f28500 in the Color Lab

Contrast Checker →Palette Generator →Palette Pro →Scale Generator →CSS Code Generator →Color Blind Simulator →Accessibility Checker →Color Distance →