lightcyan
CSS keyword
On white 1.05:1 · Fail
On black 19.92:1 · AAA
Cyan Colors
Names, HEX, RGB & Contrast
67 named cyan colors, grouped by lightness. Click any value to copy it.
Light
21 colors
paleturquoise
CSS keyword
On white 1.29:1 · Fail
On black 16.29:1 · AAA
powderblue
CSS keyword
On white 1.43:1 · Fail
On black 14.65:1 · AAA
lightblue
CSS keyword
On white 1.53:1 · Fail
On black 13.74:1 · AAA
ice blue
On white 1.07:1 · Fail
On black 19.62:1 · AAA
very pale blue
On white 1.07:1 · Fail
On black 19.59:1 · AAA
ice
On white 1.07:1 · Fail
On black 19.54:1 · AAA
very light blue
On white 1.07:1 · Fail
On black 19.58:1 · AAA
really light blue
On white 1.07:1 · Fail
On black 19.55:1 · AAA
pale blue
On white 1.09:1 · Fail
On black 19.29:1 · AAA
light light blue
On white 1.09:1 · Fail
On black 19.21:1 · AAA
light sky blue
On white 1.12:1 · Fail
On black 18.77:1 · AAA
eggshell blue
On white 1.11:1 · Fail
On black 18.99:1 · AAA
duck egg blue
On white 1.14:1 · Fail
On black 18.43:1 · AAA
pale sky blue
On white 1.18:1 · Fail
On black 17.78:1 · AAA
pale cyan
On white 1.12:1 · Fail
On black 18.7:1 · AAA
light cyan
On white 1.14:1 · Fail
On black 18.46:1 · AAA
robin's egg blue
On white 1.31:1 · Fail
On black 16.05:1 · AAA
robin egg blue
On white 1.3:1 · Fail
On black 16.09:1 · AAA
tiffany blue
On white 1.35:1 · Fail
On black 15.56:1 · AAA
robin's egg
On white 1.38:1 · Fail
On black 15.18:1 · AAA
Mid-tone
24 colors
turquoise
CSS keyword
On white 1.64:1 · Fail
On black 12.79:1 · AAA
mediumturquoise
CSS keyword
On white 1.86:1 · Fail
On black 11.27:1 · AAA
aqua
CSS keyword
On white 1.25:1 · Fail
On black 16.75:1 · AAA
cadetblue
CSS keyword
On white 3.05:1 · AA Large
On black 6.88:1 · AA
cyan
CSS keyword
On white 1.25:1 · Fail
On black 16.75:1 · AAA
lightseagreen
CSS keyword
On white 2.62:1 · Fail
On black 8.01:1 · AAA
darkturquoise
CSS keyword
On white 1.95:1 · Fail
On black 10.75:1 · AAA
bright cyan
On white 1.26:1 · Fail
On black 16.71:1 · AAA
cool grey
On white 2.6:1 · Fail
On black 8.07:1 · AAA
bright light blue
On white 1.33:1 · Fail
On black 15.81:1 · AAA
aqua marine
On white 1.57:1 · Fail
On black 13.38:1 · AAA
bright turquoise
On white 1.27:1 · Fail
On black 16.56:1 · AAA
bright aqua
On white 1.33:1 · Fail
On black 15.75:1 · AAA
neon blue
On white 1.7:1 · Fail
On black 12.37:1 · AAA
bright sky blue
On white 1.9:1 · Fail
On black 11.07:1 · AAA
dull teal
On white 3.1:1 · AA Large
On black 6.77:1 · AA
bright teal
On white 1.37:1 · Fail
On black 15.37:1 · AAA
aqua blue
On white 1.75:1 · Fail
On black 12:1 · AAA
tealish
On white 2.38:1 · Fail
On black 8.83:1 · AAA
dusty teal
On white 3.73:1 · AA Large
On black 5.64:1 · AA
sea
On white 3.41:1 · AA Large
On black 6.16:1 · AA
topaz
On white 2.4:1 · Fail
On black 8.75:1 · AAA
turquoise blue
On white 2.59:1 · Fail
On black 8.09:1 · AAA
green blue
On white 2.66:1 · Fail
On black 7.91:1 · AAA
Dark
22 colors
darkcyan
CSS keyword
On white 4.15:1 · AA Large
On black 5.07:1 · AA
teal
CSS keyword
On white 4.77:1 · AA
On black 4.4:1 · AA Large
darkslategray
CSS keyword
On white 8.93:1 · AAA
On black 2.35:1 · Fail
darkslategrey
CSS keyword
On white 8.93:1 · AAA
On black 2.35:1 · Fail
blue/green
On white 3.44:1 · AA Large
On black 6.1:1 · AA
teal blue
On white 4.18:1 · AA Large
On black 5.02:1 · AA
sea blue
On white 5.33:1 · AA
On black 3.94:1 · AA Large
greenish blue
On white 4.15:1 · AA Large
On black 5.06:1 · AA
dark cyan
On white 4.28:1 · AA Large
On black 4.9:1 · AA
ocean
On white 4.94:1 · AA
On black 4.25:1 · AA Large
blue green
On white 4.96:1 · AA
On black 4.23:1 · AA Large
deep aqua
On white 5.25:1 · AA
On black 4:1 · AA Large
dark green blue
On white 7.05:1 · AAA
On black 2.98:1 · Fail
bluegreen
On white 5.17:1 · AA
On black 4.06:1 · AA Large
deep turquoise
On white 5.67:1 · AA
On black 3.71:1 · AA Large
dark aquamarine
On white 5.69:1 · AA
On black 3.69:1 · AA Large
dark aqua
On white 6.48:1 · AA
On black 3.24:1 · AA Large
petrol
On white 7.38:1 · AAA
On black 2.85:1 · Fail
dark turquoise
On white 7.83:1 · AAA
On black 2.68:1 · Fail
deep teal
On white 8.58:1 · AAA
On black 2.45:1 · Fail
dark blue green
On white 9.12:1 · AAA
On black 2.3:1 · Fail
dark teal
On white 9.66:1 · AAA
On black 2.17:1 · Fail
Copy the whole palette
Every cyan color on this page, ready to paste into your project.
CSS
:root {
--lightcyan: #e0ffff;
--paleturquoise: #afeeee;
--powderblue: #b0e0e6;
--lightblue: #add8e6;
--turquoise: #40e0d0;
--mediumturquoise: #48d1cc;
--aqua: #00ffff;
--cadetblue: #5f9ea0;
--cyan: #00ffff;
--lightseagreen: #20b2aa;
--darkturquoise: #00ced1;
--darkcyan: #008b8b;
--teal: #008080;
--darkslategray: #2f4f4f;
--darkslategrey: #2f4f4f;
--ice-blue: #d7fffe;
--very-pale-blue: #d6fffe;
--ice: #d6fffa;
--very-light-blue: #d5ffff;
--really-light-blue: #d4ffff;
--pale-blue: #d0fefe;
--light-light-blue: #cafffb;
--light-sky-blue: #c6fcff;
--eggshell-blue: #c4fff7;
--duck-egg-blue: #c3fbf4;
--pale-sky-blue: #bdf6fe;
--pale-cyan: #b7fffa;
--light-cyan: #acfffc;
--robin-s-egg-blue: #98eff9;
--robin-egg-blue: #8af1fe;
--tiffany-blue: #7bf2da;
--robin-s-egg: #6dedfd;
--bright-cyan: #41fdfe;
--cool-grey: #95a3a6;
--bright-light-blue: #26f7fd;
--aqua-marine: #2ee8bb;
--bright-turquoise: #0ffef9;
--bright-aqua: #0bf9ea;
--neon-blue: #04d9ff;
--bright-sky-blue: #02ccfe;
--dull-teal: #5f9e8f;
--bright-teal: #01f9c6;
--aqua-blue: #02d8e9;
--tealish: #24bca8;
--dusty-teal: #4c9085;
--sea: #3c9992;
--topaz: #13bbaf;
--turquoise-blue: #06b1c4;
--green-blue: #06b48b;
--blue-green: #0f9b8e;
--teal-blue: #01889f;
--sea-blue: #047495;
--greenish-blue: #0b8b87;
--dark-cyan: #0a888a;
--ocean: #017b92;
--blue-green: #137e6d;
--deep-aqua: #08787f;
--dark-green-blue: #1f6357;
--bluegreen: #017a79;
--deep-turquoise: #017374;
--dark-aquamarine: #017371;
--dark-aqua: #05696b;
--petrol: #005f6a;
--dark-turquoise: #045c5a;
--deep-teal: #00555a;
--dark-blue-green: #005249;
--dark-teal: #014d4e;
} SCSS
$lightcyan: #e0ffff; $paleturquoise: #afeeee; $powderblue: #b0e0e6; $lightblue: #add8e6; $turquoise: #40e0d0; $mediumturquoise: #48d1cc; $aqua: #00ffff; $cadetblue: #5f9ea0; $cyan: #00ffff; $lightseagreen: #20b2aa; $darkturquoise: #00ced1; $darkcyan: #008b8b; $teal: #008080; $darkslategray: #2f4f4f; $darkslategrey: #2f4f4f; $ice-blue: #d7fffe; $very-pale-blue: #d6fffe; $ice: #d6fffa; $very-light-blue: #d5ffff; $really-light-blue: #d4ffff; $pale-blue: #d0fefe; $light-light-blue: #cafffb; $light-sky-blue: #c6fcff; $eggshell-blue: #c4fff7; $duck-egg-blue: #c3fbf4; $pale-sky-blue: #bdf6fe; $pale-cyan: #b7fffa; $light-cyan: #acfffc; $robin-s-egg-blue: #98eff9; $robin-egg-blue: #8af1fe; $tiffany-blue: #7bf2da; $robin-s-egg: #6dedfd; $bright-cyan: #41fdfe; $cool-grey: #95a3a6; $bright-light-blue: #26f7fd; $aqua-marine: #2ee8bb; $bright-turquoise: #0ffef9; $bright-aqua: #0bf9ea; $neon-blue: #04d9ff; $bright-sky-blue: #02ccfe; $dull-teal: #5f9e8f; $bright-teal: #01f9c6; $aqua-blue: #02d8e9; $tealish: #24bca8; $dusty-teal: #4c9085; $sea: #3c9992; $topaz: #13bbaf; $turquoise-blue: #06b1c4; $green-blue: #06b48b; $blue-green: #0f9b8e; $teal-blue: #01889f; $sea-blue: #047495; $greenish-blue: #0b8b87; $dark-cyan: #0a888a; $ocean: #017b92; $blue-green: #137e6d; $deep-aqua: #08787f; $dark-green-blue: #1f6357; $bluegreen: #017a79; $deep-turquoise: #017374; $dark-aquamarine: #017371; $dark-aqua: #05696b; $petrol: #005f6a; $dark-turquoise: #045c5a; $deep-teal: #00555a; $dark-blue-green: #005249; $dark-teal: #014d4e;
Tailwind
theme: {
extend: {
colors: {
"lightcyan": "#e0ffff",
"paleturquoise": "#afeeee",
"powderblue": "#b0e0e6",
"lightblue": "#add8e6",
"turquoise": "#40e0d0",
"mediumturquoise": "#48d1cc",
"aqua": "#00ffff",
"cadetblue": "#5f9ea0",
"cyan": "#00ffff",
"lightseagreen": "#20b2aa",
"darkturquoise": "#00ced1",
"darkcyan": "#008b8b",
"teal": "#008080",
"darkslategray": "#2f4f4f",
"darkslategrey": "#2f4f4f",
"ice-blue": "#d7fffe",
"very-pale-blue": "#d6fffe",
"ice": "#d6fffa",
"very-light-blue": "#d5ffff",
"really-light-blue": "#d4ffff",
"pale-blue": "#d0fefe",
"light-light-blue": "#cafffb",
"light-sky-blue": "#c6fcff",
"eggshell-blue": "#c4fff7",
"duck-egg-blue": "#c3fbf4",
"pale-sky-blue": "#bdf6fe",
"pale-cyan": "#b7fffa",
"light-cyan": "#acfffc",
"robin-s-egg-blue": "#98eff9",
"robin-egg-blue": "#8af1fe",
"tiffany-blue": "#7bf2da",
"robin-s-egg": "#6dedfd",
"bright-cyan": "#41fdfe",
"cool-grey": "#95a3a6",
"bright-light-blue": "#26f7fd",
"aqua-marine": "#2ee8bb",
"bright-turquoise": "#0ffef9",
"bright-aqua": "#0bf9ea",
"neon-blue": "#04d9ff",
"bright-sky-blue": "#02ccfe",
"dull-teal": "#5f9e8f",
"bright-teal": "#01f9c6",
"aqua-blue": "#02d8e9",
"tealish": "#24bca8",
"dusty-teal": "#4c9085",
"sea": "#3c9992",
"topaz": "#13bbaf",
"turquoise-blue": "#06b1c4",
"green-blue": "#06b48b",
"blue-green": "#0f9b8e",
"teal-blue": "#01889f",
"sea-blue": "#047495",
"greenish-blue": "#0b8b87",
"dark-cyan": "#0a888a",
"ocean": "#017b92",
"blue-green": "#137e6d",
"deep-aqua": "#08787f",
"dark-green-blue": "#1f6357",
"bluegreen": "#017a79",
"deep-turquoise": "#017374",
"dark-aquamarine": "#017371",
"dark-aqua": "#05696b",
"petrol": "#005f6a",
"dark-turquoise": "#045c5a",
"deep-teal": "#00555a",
"dark-blue-green": "#005249",
"dark-teal": "#014d4e",
}
}
} Browse other color families
Copied
Cyan color names
Cyan and teal occupy hue 165–195°, the narrow band where green becomes blue. It holds turquoise, aqua and the darker teals. Cyan is also one of the four process printing inks, which is why it appears in every CMYK conversion.
Using these colors
Teal has become the default ‘trustworthy but not corporate’ colour, common in health, finance and productivity products that want to avoid generic blue. It pairs well with coral and warm orange for a complementary scheme, and with sand and cream for something softer. Darker teals work well as primary surfaces.
Contrast and accessibility
Light aqua and turquoise fail as text on white but work well as backgrounds with dark text. Darker teals are dependable and often reach AA or AAA on light surfaces. Cyan on white is a common accessibility mistake in link styling — verify before shipping.