GitBrand
  1. Home
  2. Guides
  3. Brand colors

Guide 05 · Color

Brand colors: HEX, RGB, HSL and CMYK, and how to share them.

HEX and RGB describe a color for screens. HSL describes the same screen color in a way that is easier to adjust. CMYK describes ink for print and does not convert exactly from any of them. Document all of them, name every color and say which one is authoritative for each medium.

By the GitBrand teamUpdated September 23, 20266 min read

#456455

HEX
#456455
RGB
rgb(69, 100, 85)
HSL
hsl(151, 18%, 33%)
CMYK
cmyk(31, 0, 15, 61)approximation

In short

01HEX and RGB are the same information in two notations
02HSL is useful for creating tints and shades consistently
03CMYK is for print; automatic conversion is an approximation
04Name colors by role: primary, accent, neutral
05Export the palette for developers as CSS, SCSS, Tailwind or JSON

HEX and RGB: screen colors

RGB expresses a color as red, green and blue light from 0 to 255. HEX writes the same three values in hexadecimal, so #456455 and rgb(69, 100, 85) are one color. Websites, apps, slide tools and social platforms use these. If your brand only ever appears on screens, HEX is the value to write down and share.

Forest · Primary#456455 = rgb(69, 100, 85)
Sand · Accent#E9C6A3 = rgb(233, 198, 163)
Paper · Background#F4F1E7 = rgb(244, 241, 231)
Ink · Text#20332F = rgb(32, 51, 47)

The North mock palette. Each pair is one color in two notations.

HSL: the same color, easier to work with

HSL describes hue, saturation and lightness. Designers and developers use it to create consistent lighter and darker variants of a brand color by changing only the lightness. It is a notation, not a different color, and it converts exactly to and from RGB. Include it for the people who build design systems.

hsl(151, 18%, 22%)hsl(151, 18%, 88%)

Forest is hsl(151, 18%, 33%). Holding hue and saturation and moving only lightness gives a tint scale that stays on brand.

CMYK and Pantone: print colors

CMYK describes cyan, magenta, yellow and black ink percentages. Ink and light behave differently, so no formula converts a screen color to print exactly; the same RGB value can look different on coated and uncoated paper. Get CMYK or Pantone references from the original designer or the print supplier. GitBrand shows a CMYK conversion as a starting point and labels it as such.

Screen#456455rgb(69, 100, 85)
Print, approximatecmyk(31, 0, 15, 61)confirm on a proof

The right tile is deliberately a touch off. That gap is what a proof is for.

Name colors by role

A palette of hex codes is a list. A palette of named roles is a system. “Forest, primary”, “Sand, accent”, “Paper, background” tells someone what the color is for. Include the neutrals; most off-brand work happens in the greys nobody documented.

PrimaryForest · #456455
AccentSand · #E9C6A3
BackgroundPaper · #F4F1E7
TextInk · #20332F

In a GitBrand repository each color has a name and a description, so the role ships with the value.

Share the palette in the formats people use

Developers want CSS variables or a Tailwind config. Designers want swatches. Marketing wants the hex to paste into a tool. GitBrand shows each color in every format and exports the whole palette as CSS, SCSS, Tailwind, JSON, plain text or an SVG swatch sheet, so nobody retypes a value.

  • Web and product: HEX or CSS variables
  • Design tools: swatch file or HSL for variants
  • Print: CMYK or Pantone from the supplier
  • Documents and decks: HEX, pasted into the theme
/* north.css — exported from gitbrand.com/north */
:root {
  --color-forest: #456455;
  --color-sand: #e9c6a3;
  --color-paper: #f4f1e7;
  --color-ink: #20332f;
}

Which format, where

Write the value people will paste, not the one that is technically most precise.

UseGive themWhy
Website and productHEX or CSS variablesBrowsers read HEX directly.
Design toolsSwatch file or HSLHSL makes tints and shades predictable.
PrintCMYK or Pantone from the supplierInk does not match light exactly.
Documents and decksHEX, pasted into the themeOffice and slide tools take HEX.
Social platformsHEXProfile and template editors accept HEX only.

Color questions we hear most

Why does my brand blue look different in print?

Screens emit light and printers lay down ink. The conversion is an approximation, and paper stock changes the result again. Use a print-specific reference and check a proof.

Does GitBrand convert colors for me?

Yes. Enter a HEX value and GitBrand shows RGB, HSL and a CMYK approximation. Treat the CMYK as a starting point and confirm it with your printer.

How many brand colors should we have?

Usually a primary, one or two accents and a small set of neutrals. More than that becomes hard to apply consistently.

Which value should I treat as the source of truth?

For screens, the HEX value; RGB and HSL derive from it exactly. For print, the CMYK or Pantone reference your supplier proofed. Write both down and say which is which so nobody converts in the wrong direction.

Keep reading

All guides →

Every color, in every format, at one link

Add your palette to a free GitBrand repository. Each color shows HEX, RGB, HSL and CMYK, and the whole set exports as CSS, SCSS, Tailwind, JSON, TXT or an SVG swatch.