A color family is a group of colors that share the same base hue.
Every tint (hue plus white), shade (hue plus black) and tone (hue plus gray) of that
hue stays inside the same family - which is why sky blue, denim, cobalt and navy all
belong to the blue color family. Grouping colors this
way makes it easy to find a lighter or darker version of a color you already like, and
to build palettes that stay in harmony.
Below you will find every color family chart on colorxs.com. Each family
page lists the color names in that hue with their HEX, RGB and CMYK codes,
ordered from light to dark, so you can use it as a color chart and picker for your next
design project.
All Color Families
18 hue families. Select one to see every named shade in it.
A color family is a group of colors that share the same base hue. Every shade, tint and
tone of that hue - lighter, darker, duller or more vivid - belongs to the same family.
Sky blue, navy and cobalt all sit inside the blue color family.
How many color families are there?
Colorxs groups its color names into 18 families: red, orange, yellow,
green, cyan, blue, violet, purple, magenta, pink, brown, beige, gray, white and black,
plus the pastel and neon groups. Traditional color theory usually starts from the twelve
hues of the color wheel and adds the neutrals.
What is the difference between a tint, a shade and a tone?
A tint is a hue mixed with white, a shade is a hue mixed with black, and a tone is a hue
mixed with gray. All three keep the base hue, so they stay in the same color family. Use
the tints and shades generator to build them from any color.
How do I find which family a color belongs to?
Search the color name or hex code at the top of this page. Every color page names the
family the color belongs to and links to the rest of the shades in that family. You can
also browse the full A to Z color name index.
How do I use color families in a design?
Picking a base and a few shades from a single family gives a calm, monochromatic look,
while pairing two families that sit opposite each other on the color wheel gives contrast.
The color palette generator and the
opposite color tool can do both for you.