list-item

Fast Color Codes Cheat Sheet: Hex, RGB, and CSS Snippets

Quickly finding and using color codes can save development time and improve design consistency. This cheat sheet covers the most common color formats used in front-end development and design, with ready-to-copy examples and small tips for practical use.

Common color formats

• Hex (hexadecimal)
  • Format: #RRGGBB or #RGB
  • Example: #1E90FF (DodgerBlue), shorthand: #0F0 (lime)
  • Use: Compact, widely supported in CSS and design tools.
• RGB / RGBA
  • Format: rgb(r, g, b) or rgba(r, g, b, a)
  • Example: rgb(30,144,255) — same as #1E90FF
  • Alpha: rgba(30,144,255, 0.6) for 60% opacity.
  • Use: When you need explicit control over channels or opacity.
• HSL / HSLA
  • Format: hsl(h, s%, l%) or hsla(h, s%, l%, a)
  • Example: hsl(210, 100%, 56%) — close to DodgerBlue
  • Use: Intuitive for adjusting hue, saturation, and lightness.
• CSS color names
  • Format: color keyword
  • Example: dodgerblue, crimson, teal
  • Use: Quick and readable, but limited palette and inconsistent rendering across systems.

Quick conversion references

• Hex to RGB: #1E90FF → rgb(30, 144, 255)
• RGB to Hex: rgb(255, 165, 0) → #FFA500 (Orange)
• Hex shorthand expand: #0F0 → #00FF00

Ready-to-use color snippets

Primary colors:

• Hex: #FF5733 — rgb(255, 87, 51)
• Hex: #28A745 — rgb(40, 167, 69)
• Hex: #007BFF — rgb(0, 123, 255)

Neutral greys:

• Hex: #F8F9FA — rgb(248, 249, 250)
• Hex: #CED4DA — rgb(206, 212, 218)
• Hex: #343A40 — rgb(52, 58, 64)

Accent palette (vibrant):

• #FF6B6B — rgb(255,107,107)
• #FFD93D — rgb(255,217,61)
• #6BCB77 — rgb(107,203,119)
• #4D96FF — rgb(77,150,255)

Dark mode-friendly:

• Background: #0B1220 — rgb(11,18,32)
• Surface: #121826 — rgb(18,24,38)
• Muted text: #98A0B3 — rgb(152,160,179)
• Accent: #6EA8FE — rgb(110,168,254)

CSS snippets

• Hex:

.button { background-color: #007BFF; color: #FFFFFF; }

• RGB with opacity:

.overlay { background-color: rgba(11,18,32,0.6); }

• HSL for theme adjustments:

:root {–primary-h: 210;  –primary-s: 100%;  –primary-l: 56%;}.button { background: hsl(var(–primary-h), var(–primary-s), var(–primary-l)); }.button:hover { background: hsl(var(–primary-h), var(–primary-s), calc(var(–primary-l) + 6%)); }

• Using CSS variables for scalable palettes:

:root{  –bg: #F8F9FA;  –surface: #FFFFFF;  –primary: #007BFF;  –accent: #FF6B6B;}.card { background: var(–surface); color: #212529; border: 1px solid #E9ECEF; }

Practical tips

• Prefer variables: Use CSS variables or Sass variables for theme consistency and easy updates.
• Alpha composition: Use RGBA/HSLA or CSS color() with alpha when layering translucent elements.
• Accessibility: Check contrast ratios (WCAG) for text over backgrounds; aim for 4.5:1 for normal text.
• Palette harmony: Use HSL to shift lightness for tints/shades while keeping hue/saturation consistent.
• File formats: For images, use sRGB color profile to maintain consistent colors across browsers.

Small workflow cheats

• Need a tint quickly? Increase lightness in HSL by ~10