Colors Palettes
All palettes

Cyan

Beautiful Cyan color palette.

Web Design 5 colors
#0985AA
#27CFFF
#10AFC7
#4EEFFA
#0094A6

Every color in Cyan

HEX, RGB and HSL codes with contrast ratings. Click to copy.

328 40
#0985AA
Primary
#0985AA rgb(9, 133, 170) hsl(194, 90%, 35%)
On white 4.24:1 AA large text On black 4.95:1 AA
#27CFFF
Secondary
#27CFFF rgb(39, 207, 255) hsl(193, 100%, 58%)
On white 1.83:1 Fails On black 11.46:1 AAA
#10AFC7
Accent
#10AFC7 rgb(16, 175, 199) hsl(188, 85%, 42%)
On white 2.63:1 Fails On black 7.98:1 AAA
#4EEFFA
Background
#4EEFFA rgb(78, 239, 250) hsl(184, 95%, 64%)
On white 1.40:1 Fails On black 15.05:1 AAA
#0094A6
Text
#0094A6 rgb(0, 148, 166) hsl(187, 100%, 33%)
On white 3.63:1 AA large text On black 5.79:1 AA

About the Cyan palette

Cyan has 5 colors in the Web Design category. Overall it reads as mid-tone and vivid, with an average lightness of 46% and an average saturation of 94%. The hues lean cool.

The strongest text and background pair is #0985AA with #4EEFFA, at a contrast ratio of 3.04:1 (AA large text). No pair in this palette reaches 4.5:1, so add a very dark or very light neutral before you set body text with it.

Color harmony

Measured from this palette's real values.

Saturation
94%
Lightness
46%
Best contrast
3.0

Ideas for using it

  • Web design: use #0985AA for buttons and links, and keep large areas to the lighter colors.
  • Mobile apps: check each color against white and black above before you use it for text or icons.
  • Brand identity: pick one or two colors as the core and keep the rest as support.
  • Presentations: use the mid-tone colors for backgrounds and the strongest contrast pair for titles.

Use it in your project

Copy this palette as CSS variables, or export it in another format.

:root {
  --color-1: #0985AA; /* Primary */
  --color-2: #27CFFF; /* Secondary */
  --color-3: #10AFC7; /* Accent */
  --color-4: #4EEFFA; /* Background */
  --color-5: #0094A6; /* Text */
}