Cyan Color Codes: RGB and HEX

The standard digital cyan is HEX #00FFFF, which is RGB 0, 255, 255. The red channel is off and the green and blue channels are both at full intensity. This is the value behind the CSS color keywords "cyan" and "aqua", which are two names for the same color. Graphics software, web browsers and SVG files all read it the same way, so it is the code to use when a vector logo calls for pure on-screen cyan.

Cyan in Common Color Notations

Each value below describes the same screen color. The HSL, HSV and decimal values are calculated directly from the RGB triplet.

Notation | Value

HEX | #00FFFF

Shorthand HEX | #0FF

RGB (0–255) | 0, 255, 255

RGB (percent) | 0%, 100%, 100%

RGB (normalized 0–1) | 0, 1, 1

HSL | 180°, 100%, 50%

HSV / HSB | 180°, 100%, 100%

Decimal integer | 65535

CSS keywords | cyan, aqua

Screen Cyan Versus Print Cyan

The word "cyan" can refer to two different colors, and logo files often contain both. In RGB, cyan is the light-based color #00FFFF. In CMYK, cyan is a process ink, written as C100 M0 Y0 K0. These are not the same color. Fully saturated #00FFFF lies outside the range that standard process inks can reproduce. A printed cyan therefore looks deeper and less luminous than the on-screen version.

Converting between the two models depends on the color profile your software uses, so no single HEX value is the universal match for process cyan. The source material for this article gives no profile-specific conversion or Pantone equivalent. If a logo has to print consistently, take the CMYK or spot-color value from the brand guidelines or the printer instead of converting from #00FFFF.

Using Cyan in Vector Logo Gradients

In vector artwork, a gradient is stored as a set of color stops along a path or shape. Each stop holds a color value and a position. Because the stops are numbers, you can edit, recolor or export a cyan gradient without losing quality. A simple linear gradient from pure cyan to the CSS named color darkcyan (#008B8B) looks like this in SVG:

<linearGradient id="cyan-fade" x1="0" y1="0" x2="1" y2="0">
  <stop offset="0" stop-color="#00FFFF"/>
  <stop offset="1" stop-color="#008B8B"/>
</linearGradient>

Other CSS named colors in the same hue family can serve as gradient stops. Each has a fixed definition:

• lightcyan — #E0FFFF (RGB 224, 255, 255)
• cyan / aqua — #00FFFF (RGB 0, 255, 255)
• darkcyan — #008B8B (RGB 0, 139, 139)

Some gradient types do not always survive export as editable vectors. Gradient meshes, blends and effect-based fades may be flattened into embedded raster images when you save to a format that does not support them. A file with an .svg, .ai or .eps extension can still hold a bitmap gradient, and a preview thumbnail can look identical either way. To confirm the cyan gradient is still live vector data, open the file in a vector editor and select the shape. You should see editable gradient stops, not a placed image.

Practical Cautions

Pure #00FFFF is very light. Using the WCAG relative-luminance formula, its contrast ratio against white is about 1.25:1, and against black about 16.75:1. Cyan text or thin cyan line work on a white background will be hard to read. In gradients, put the darker stops where the logo must stand out against light backgrounds.

Picking a cyan HEX code out of an existing logo file does not give you rights to the artwork. Being able to download a logo is different from having permission to change it, reuse its fonts or use its trademark. If you are matching another organization's cyan, follow their published brand guidelines and usage terms.

Gaps in the Available Evidence

The values above are standard definitions and direct calculations. The source material for this article contained no brand-specific cyan values, Pantone references or profile-based CMYK-to-HEX conversions. Get those figures from the relevant brand standard or print provider.