Hex Color Rules of Thumb (RGB Cube + Practical UI Heuristics)

Use this page as a compact reference for reading and mutating #RRGGBB values. The examples embed the color inside each swatch (double-stacked).
1) Hex Structure
#RRGGBB → three axes in RGB space
  • RR controls red intensity (00 → FF).
  • GG controls green intensity (00 → FF).
  • BB controls blue intensity (00 → FF).
  • When RR = GG = BB, the result renders grayscale.
Black
#000000
All channels at minimum.
R=00 G=00 B=00
White
#FFFFFF
All channels at maximum.
R=FF G=FF B=FF
Mid gray
#808080
Equal channels → neutral gray.
R=80 G=80 B=80

#RRGGBB  →  R, G, B each span 00..FF
RR = GG = BB  →  grayscale
2) Brightness Direction
Lift or drop all channels together
  • For a stable hue direction, add the same offset to RR, GG, BB.
  • For a darker variant, subtract the same offset across all channels.
Dark
#202020
Low brightness band.
+00 baseline
Mid-dark
#404040
Add ~0x20 to each channel.
Δ ≈ +32
Mid
#606060
Add again → brighter neutral.
Δ ≈ +64
Practical UI heuristic: dark backgrounds often keep each channel under roughly 0x40 for depth and headroom.
3) Saturation Direction
Channel spread drives intensity
  • When channels cluster together, the color trends muted or gray-adjacent.
  • When one channel dominates and others drop, saturation climbs.
  • Rule: larger (max − min) across channels yields stronger saturation.
Muted
#778899
Channels remain close.
spread small
Vivid
#0033FF
Blue dominates strongly.
spread large
Bright accent
#7AB6FF
High brightness + controlled dominance.
accent band

Increase saturation:
  push dominant channel → FF
  pull weaker channels → 00

Reduce saturation:
  move channels toward equality
4) Hue Rotation
Trade dominance among channels
  • Hue transitions follow a common cycle: Red → Yellow → Green → Cyan → Blue → Magenta → Red.
  • You rotate hue by raising one channel while lowering another.
Red
#FF0000
R dominates.
R high
Orange
#FF8000
Raise G under high R.
R high + G mid
Yellow
#FFFF00
R and G both high.
R=FF G=FF
Green
#00FF00
G dominates.
G high
Cyan
#00FFFF
G and B both high.
G=FF B=FF
Blue
#0000FF
B dominates.
B high
Magenta
#FF00FF
R and B both high.
R=FF B=FF
A “spiral” intuition emerges when you rotate hue while also adjusting brightness and channel spread (saturation) in parallel.
5) UI Palette Heuristics
Dark UI targets: background/panel/text/accent + semantic colors
  • Dark background: keep channels low and close together (muted depth).
  • Panel: lift slightly above background for separation.
  • Text: keep channels high and near-equal for neutrality.
  • Accent: choose one dominant channel with a secondary channel at medium intensity.
  • Semantics: good → green-dominant; bad → red-dominant; warn → yellow/orange band.
Background
#0B1220
Low band, close channels.
dark base
Panel
#101825
Slight lift for separation.
surface
Text
#E7EEFC
High band, near-equal channels.
readability
Accent
#7AB6FF
Interaction emphasis.
focus / hover
Good
#9EF0B4
Positive semantic encoding.
winner
Bad
#FF9AA2
Negative semantic encoding.
loser
Warn
#FFD68A
Tie / ambiguity encoding.
tie
6) Contrast Distance Rule (Practical)
Large multi-channel differences support legibility
  • When two colors differ strongly across at least two channels, the eye separates them quickly.
  • For dark UI: push text into the high band (near E0–FF) and keep surfaces low (00–40 range) for headroom.
Too close
#1A1F2B
Pairs closely with next.
low distance
Too close
#1C212F
Low separation risk.
low distance
Good pair
#0B1220
Pairs well with light text.
surface
Good pair
#E7EEFC
High band text color.
foreground
7) Compact Cheatsheet
Operational mutation rules

Brightness:
  raise RR, GG, BB together  → lighter
  lower RR, GG, BB together  → darker

Saturation:
  increase (max − min) across channels  → more vivid
  reduce (max − min)                    → more muted

Hue:
  rotate dominance among channels:
    Red → Yellow → Green → Cyan → Blue → Magenta → Red

Dark UI heuristic:
  background channels: mostly under ~0x40
  text channels: mostly above ~0xE0
If you later want an automated “palette ladder” generator (from one base hex), you can implement it by stepping brightness and saturation along fixed increments while keeping hue constant.