oldlace
CSS keyword
On white 1.08:1 · Fail
On black 19.38:1 · AAA
Orange Colors
Names, HEX, RGB & Contrast
69 named orange colors, grouped by lightness. Click any value to copy it.
Light
20 colors
linen
CSS keyword
On white 1.12:1 · Fail
On black 18.67:1 · AAA
cornsilk
CSS keyword
On white 1.07:1 · Fail
On black 19.71:1 · AAA
papayawhip
CSS keyword
On white 1.13:1 · Fail
On black 18.56:1 · AAA
antiquewhite
CSS keyword
On white 1.17:1 · Fail
On black 17.93:1 · AAA
blanchedalmond
CSS keyword
On white 1.17:1 · Fail
On black 18.02:1 · AAA
bisque
CSS keyword
On white 1.22:1 · Fail
On black 17.15:1 · AAA
peachpuff
CSS keyword
On white 1.31:1 · Fail
On black 15.98:1 · AAA
moccasin
CSS keyword
On white 1.23:1 · Fail
On black 17.02:1 · AAA
navajowhite
CSS keyword
On white 1.29:1 · Fail
On black 16.3:1 · AAA
wheat
CSS keyword
On white 1.31:1 · Fail
On black 15.98:1 · AAA
lightsalmon
CSS keyword
On white 1.99:1 · Fail
On black 10.56:1 · AAA
burlywood
CSS keyword
On white 1.86:1 · Fail
On black 11.31:1 · AAA
light peach
On white 1.34:1 · Fail
On black 15.71:1 · AAA
pale peach
On white 1.23:1 · Fail
On black 17.06:1 · AAA
peach
On white 1.79:1 · Fail
On black 11.75:1 · AAA
yellow tan
On white 1.28:1 · Fail
On black 16.46:1 · AAA
apricot
On white 1.79:1 · Fail
On black 11.76:1 · AAA
sandy
On white 1.4:1 · Fail
On black 15.05:1 · AAA
pale gold
On white 1.33:1 · Fail
On black 15.84:1 · AAA
Mid-tone
49 colors
darksalmon
CSS keyword
On white 2.31:1 · Fail
On black 9.11:1 · AAA
sandybrown
CSS keyword
On white 2.03:1 · Fail
On black 10.33:1 · AAA
coral
CSS keyword
On white 2.5:1 · Fail
On black 8.4:1 · AAA
peru
CSS keyword
On white 2.99:1 · Fail
On black 7.02:1 · AAA
darkorange
CSS keyword
On white 2.33:1 · Fail
On black 9:1 · AAA
orange
CSS keyword
On white 1.97:1 · Fail
On black 10.63:1 · AAA
orangered
CSS keyword
On white 3.44:1 · AA Large
On black 6.1:1 · AA
sand yellow
On white 1.3:1 · Fail
On black 16.1:1 · AAA
pinkish tan
On white 2.34:1 · Fail
On black 8.96:1 · AAA
light gold
On white 1.35:1 · Fail
On black 15.57:1 · AAA
sand
On white 1.62:1 · Fail
On black 12.94:1 · AAA
light mustard
On white 1.43:1 · Fail
On black 14.64:1 · AAA
very light brown
On white 1.95:1 · Fail
On black 10.79:1 · AAA
pale orange
On white 1.92:1 · Fail
On black 10.91:1 · AAA
pastel orange
On white 2.16:1 · Fail
On black 9.73:1 · AAA
fawn
On white 2.09:1 · Fail
On black 10.07:1 · AAA
maize
On white 1.5:1 · Fail
On black 14:1 · AAA
orangeish
On white 2.31:1 · Fail
On black 9.08:1 · AAA
orangish
On white 2.49:1 · Fail
On black 8.43:1 · AAA
light orange
On white 1.91:1 · Fail
On black 11.02:1 · AAA
butterscotch
On white 1.82:1 · Fail
On black 11.56:1 · AAA
faded orange
On white 2.32:1 · Fail
On black 9.05:1 · AAA
dark peach
On white 2.9:1 · Fail
On black 7.25:1 · AAA
desert
On white 2.16:1 · Fail
On black 9.71:1 · AAA
sand brown
On white 2.31:1 · Fail
On black 9.09:1 · AAA
dusty orange
On white 2.62:1 · Fail
On black 8.01:1 · AAA
mango
On white 1.96:1 · Fail
On black 10.74:1 · AAA
sandy brown
On white 2.34:1 · Fail
On black 8.97:1 · AAA
macaroni and cheese
On white 1.87:1 · Fail
On black 11.25:1 · AAA
camel
On white 2.47:1 · Fail
On black 8.5:1 · AAA
dull orange
On white 2.84:1 · Fail
On black 7.39:1 · AAA
golden yellow
On white 1.58:1 · Fail
On black 13.3:1 · AAA
orangey yellow
On white 1.73:1 · Fail
On black 12.13:1 · AAA
sunflower
On white 1.59:1 · Fail
On black 13.25:1 · AAA
terracota
On white 3.75:1 · AA Large
On black 5.6:1 · AA
yellowish orange
On white 1.89:1 · Fail
On black 11.08:1 · AAA
terracotta
On white 3.83:1 · AA Large
On black 5.49:1 · AA
squash
On white 1.98:1 · Fail
On black 10.61:1 · AAA
saffron
On white 1.81:1 · Fail
On black 11.59:1 · AAA
tangerine
On white 2.21:1 · Fail
On black 9.49:1 · AAA
amber
On white 1.8:1 · Fail
On black 11.67:1 · AAA
adobe
On white 3.89:1 · AA Large
On black 5.4:1 · AA
terra cotta
On white 3.91:1 · AA Large
On black 5.37:1 · AA
pumpkin orange
On white 2.61:1 · Fail
On black 8.04:1 · AAA
marigold
On white 1.66:1 · Fail
On black 12.68:1 · AAA
golden rod
On white 1.72:1 · Fail
On black 12.22:1 · AAA
blood orange
On white 3.38:1 · AA Large
On black 6.22:1 · AA
orange yellow
On white 1.87:1 · Fail
On black 11.23:1 · AAA
bright orange
On white 3.11:1 · AA Large
On black 6.75:1 · AA
Copy the whole palette
Every orange color on this page, ready to paste into your project.
CSS
:root {
--oldlace: #fdf5e6;
--linen: #faf0e6;
--cornsilk: #fff8dc;
--papayawhip: #ffefd5;
--antiquewhite: #faebd7;
--blanchedalmond: #ffebcd;
--bisque: #ffe4c4;
--peachpuff: #ffdab9;
--moccasin: #ffe4b5;
--navajowhite: #ffdead;
--wheat: #f5deb3;
--lightsalmon: #ffa07a;
--burlywood: #deb887;
--darksalmon: #e9967a;
--sandybrown: #f4a460;
--coral: #ff7f50;
--peru: #cd853f;
--darkorange: #ff8c00;
--orange: #ffa500;
--orangered: #ff4500;
--light-peach: #ffd8b1;
--pale-peach: #ffe5ad;
--peach: #ffb07c;
--yellow-tan: #ffe36e;
--apricot: #ffb16d;
--sandy: #f1da7a;
--pale-gold: #fdde6c;
--sand-yellow: #fce166;
--pinkish-tan: #d99b82;
--light-gold: #fddc5c;
--sand: #e2ca76;
--light-mustard: #f7d560;
--very-light-brown: #d3b683;
--pale-orange: #ffa756;
--pastel-orange: #ff964f;
--fawn: #cfaf7b;
--maize: #f4d054;
--orangeish: #fd8d49;
--orangish: #fc824a;
--light-orange: #fdaa48;
--butterscotch: #fdb147;
--faded-orange: #f0944d;
--dark-peach: #de7e5d;
--desert: #ccad60;
--sand-brown: #cba560;
--dusty-orange: #f0833a;
--mango: #ffa62b;
--sandy-brown: #c4a661;
--macaroni-and-cheese: #efb435;
--camel: #c69f59;
--dull-orange: #d8863b;
--golden-yellow: #fec615;
--orangey-yellow: #fdb915;
--sunflower: #ffc512;
--terracota: #cb6843;
--yellowish-orange: #ffab0f;
--terracotta: #ca6641;
--squash: #f2ab15;
--saffron: #feb209;
--tangerine: #ff9408;
--amber: #feb308;
--adobe: #bd6c48;
--terra-cotta: #c9643b;
--pumpkin-orange: #fb7d07;
--marigold: #fcc006;
--golden-rod: #f9bc08;
--blood-orange: #fe4b03;
--orange-yellow: #ffad01;
--bright-orange: #ff5b00;
} SCSS
$oldlace: #fdf5e6; $linen: #faf0e6; $cornsilk: #fff8dc; $papayawhip: #ffefd5; $antiquewhite: #faebd7; $blanchedalmond: #ffebcd; $bisque: #ffe4c4; $peachpuff: #ffdab9; $moccasin: #ffe4b5; $navajowhite: #ffdead; $wheat: #f5deb3; $lightsalmon: #ffa07a; $burlywood: #deb887; $darksalmon: #e9967a; $sandybrown: #f4a460; $coral: #ff7f50; $peru: #cd853f; $darkorange: #ff8c00; $orange: #ffa500; $orangered: #ff4500; $light-peach: #ffd8b1; $pale-peach: #ffe5ad; $peach: #ffb07c; $yellow-tan: #ffe36e; $apricot: #ffb16d; $sandy: #f1da7a; $pale-gold: #fdde6c; $sand-yellow: #fce166; $pinkish-tan: #d99b82; $light-gold: #fddc5c; $sand: #e2ca76; $light-mustard: #f7d560; $very-light-brown: #d3b683; $pale-orange: #ffa756; $pastel-orange: #ff964f; $fawn: #cfaf7b; $maize: #f4d054; $orangeish: #fd8d49; $orangish: #fc824a; $light-orange: #fdaa48; $butterscotch: #fdb147; $faded-orange: #f0944d; $dark-peach: #de7e5d; $desert: #ccad60; $sand-brown: #cba560; $dusty-orange: #f0833a; $mango: #ffa62b; $sandy-brown: #c4a661; $macaroni-and-cheese: #efb435; $camel: #c69f59; $dull-orange: #d8863b; $golden-yellow: #fec615; $orangey-yellow: #fdb915; $sunflower: #ffc512; $terracota: #cb6843; $yellowish-orange: #ffab0f; $terracotta: #ca6641; $squash: #f2ab15; $saffron: #feb209; $tangerine: #ff9408; $amber: #feb308; $adobe: #bd6c48; $terra-cotta: #c9643b; $pumpkin-orange: #fb7d07; $marigold: #fcc006; $golden-rod: #f9bc08; $blood-orange: #fe4b03; $orange-yellow: #ffad01; $bright-orange: #ff5b00;
Tailwind
theme: {
extend: {
colors: {
"oldlace": "#fdf5e6",
"linen": "#faf0e6",
"cornsilk": "#fff8dc",
"papayawhip": "#ffefd5",
"antiquewhite": "#faebd7",
"blanchedalmond": "#ffebcd",
"bisque": "#ffe4c4",
"peachpuff": "#ffdab9",
"moccasin": "#ffe4b5",
"navajowhite": "#ffdead",
"wheat": "#f5deb3",
"lightsalmon": "#ffa07a",
"burlywood": "#deb887",
"darksalmon": "#e9967a",
"sandybrown": "#f4a460",
"coral": "#ff7f50",
"peru": "#cd853f",
"darkorange": "#ff8c00",
"orange": "#ffa500",
"orangered": "#ff4500",
"light-peach": "#ffd8b1",
"pale-peach": "#ffe5ad",
"peach": "#ffb07c",
"yellow-tan": "#ffe36e",
"apricot": "#ffb16d",
"sandy": "#f1da7a",
"pale-gold": "#fdde6c",
"sand-yellow": "#fce166",
"pinkish-tan": "#d99b82",
"light-gold": "#fddc5c",
"sand": "#e2ca76",
"light-mustard": "#f7d560",
"very-light-brown": "#d3b683",
"pale-orange": "#ffa756",
"pastel-orange": "#ff964f",
"fawn": "#cfaf7b",
"maize": "#f4d054",
"orangeish": "#fd8d49",
"orangish": "#fc824a",
"light-orange": "#fdaa48",
"butterscotch": "#fdb147",
"faded-orange": "#f0944d",
"dark-peach": "#de7e5d",
"desert": "#ccad60",
"sand-brown": "#cba560",
"dusty-orange": "#f0833a",
"mango": "#ffa62b",
"sandy-brown": "#c4a661",
"macaroni-and-cheese": "#efb435",
"camel": "#c69f59",
"dull-orange": "#d8863b",
"golden-yellow": "#fec615",
"orangey-yellow": "#fdb915",
"sunflower": "#ffc512",
"terracota": "#cb6843",
"yellowish-orange": "#ffab0f",
"terracotta": "#ca6641",
"squash": "#f2ab15",
"saffron": "#feb209",
"tangerine": "#ff9408",
"amber": "#feb308",
"adobe": "#bd6c48",
"terra-cotta": "#c9643b",
"pumpkin-orange": "#fb7d07",
"marigold": "#fcc006",
"golden-rod": "#f9bc08",
"blood-orange": "#fe4b03",
"orange-yellow": "#ffad01",
"bright-orange": "#ff5b00",
}
}
} Browse other color families
Copied
Orange color names
Orange covers hue 15–45° at higher saturation and lightness — the band between red and yellow, before it darkens into brown. It reads as warm and energetic, and it is the family most associated with calls to action, food and autumn palettes.
Using these colors
Orange works well against deep blue and teal, which sit opposite it on the colour wheel. It is a strong secondary accent when your primary is blue, and a good way to highlight something without the urgency red carries. Large flat areas of pure orange tire the eye quickly, so use tints for backgrounds and save full saturation for buttons and badges.
Contrast and accessibility
Orange is one of the hardest families to use accessibly: mid-tone oranges often fail against both white and black. If you need orange text, go darker than feels natural — or place the orange on a dark surface and rely on the black-contrast figure above. For buttons, orange backgrounds with black text usually pass more easily than white text.