Colors Palettes
All palettes

Cyan

Beautiful Cyan color palette.

Brand Colors 5 colors
#0693BA
#19CDE4
#49E6F6
#067895
#18B7CF

Every color in Cyan

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

491 34
#0693BA
Primary
#0693BA rgb(6, 147, 186) hsl(193, 94%, 38%)
On white 3.57:1 AA large text On black 5.89:1 AA
#19CDE4
Secondary
#19CDE4 rgb(25, 205, 228) hsl(187, 80%, 50%)
On white 1.93:1 Fails On black 10.89:1 AAA
#49E6F6
Accent
#49E6F6 rgb(73, 230, 246) hsl(186, 91%, 63%)
On white 1.51:1 Fails On black 13.93:1 AAA
#067895
Background
#067895 rgb(6, 120, 149) hsl(192, 92%, 30%)
On white 5.09:1 AA On black 4.13:1 AA large text
#18B7CF
Text
#18B7CF rgb(24, 183, 207) hsl(188, 79%, 45%)
On white 2.41:1 Fails On black 8.71:1 AAA

About the Cyan palette

Cyan has 5 colors in the Brand Colors category. Overall it reads as mid-tone and vivid, with an average lightness of 45% and an average saturation of 87%. The hues lean cool.

The strongest text and background pair is #49E6F6 with #067895, at a contrast ratio of 3.37: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
87%
Lightness
45%
Best contrast
3.4

Ideas for using it

  • Web design: use #0693BA 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: #0693BA; /* Primary */
  --color-2: #19CDE4; /* Secondary */
  --color-3: #49E6F6; /* Accent */
  --color-4: #067895; /* Background */
  --color-5: #18B7CF; /* Text */
}