Eye Color Reference

CSS

You Might Also Need

The eye color reference generates a five-swatch palette drawn from the hue bands associated with iris colour — blue, green, amber, violet and red — with every value written out as a hex code.

What is Eye Color Reference?

The eye color reference works like the other themed generators: five swatches, each with its colour and code, a Regenerate button, and a panel listing the set as numbered CSS custom properties ready to copy. What distinguishes it is the hue bands the five swatches are drawn from, which follow the spectrum you actually see in irises rather than an arbitrary spread.

  • The first swatch comes from the blue band around 200 degrees, the second from a green near 120, the third from an amber around 30, the fourth from a violet near 260, and the fifth from a red at zero.
  • Read as a set that is the familiar range of eye colours, running from the cool blues and greens through hazel and amber to the reddish browns that dominate in most populations.
  • Anyone who has looked at a chart of iris pigmentation will recognise the arc.
  • The second constraint is lightness, which is held between roughly twenty-five and fifty-five percent across the whole set.
  • That is a darker band than most of the other themed generators use, and it is what keeps the swatches reading as eyes rather than as pastels: a pale blue is a wall colour, while the blue here carries the depth of an iris in shadow.
  • The third constraint is chroma, capped at about 0.16, so no swatch comes out fully saturated.

As with the other generated palettes, Regenerate re-rolls only the saturation, not the hues or the lightness ladder. Each of the five positions keeps its band and its tonal position, so repeated presses give you the same five kinds of colour at slightly different intensities. That makes the tool a chooser rather than a slot machine — you are settling on how deep and how muted the set should feel, not gambling on a new palette.

Where this is useful is anywhere a character, an illustration or a product is being given eye colour, and the value has to be consistent across several assets. An avatar system, a doll or a game character generator all need a small fixed set of iris shades that are distinguishable from one another but sit in the same tonal world, which is exactly what the five bands produce. It is also handy for illustration palettes generally, since a set of five muted warm and cool darks works for skin, hair and shadow notation.

Be clear about what it is not. These are generated colours chosen to sit in the right hue bands, not measurements of real eyes — actual iris colour is produced by pigmentation and light scattering, varies across the surface of a single eye, and never appears as one flat value. Nor is this a list of commonly named eye colours like hazel or grey; the bands cover blue, green, amber, violet and red, and grey-brown falls between the bands rather than inside one. Used as an eye color palette to pick a consistent set of iris color shades from, though, it is quicker than inventing eye color hex codes by hand, and every swatch arrives as an eye colors with hex value you can paste straight into an asset file.

How to use Eye Color Reference

  1. Press Regenerate until the saturation level suits the assets you are making.
  2. Read the five swatches — blue, green, amber, violet and red bands, from darker to lighter.
  3. Copy the numbered custom properties, or copy an individual swatch value.

When to use Eye Color Reference vs related tools

Use this when you need a consistent set of iris colours for avatars, characters or illustrations. Use the hair colour reference for the same job on hair, or a themed palette generator when the mood rather than the subject is the guide. For the neighbouring steps, see the flag color extractor and the brand color library.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about Eye Color Reference

© 2026 Racira Colors — Free browser tools for color workflows.