RGB to Hex Color Code Converter with CSS Variable Output & Palette Export
RGB to Hex Color Code Converter with CSS Variables and Palette Export
Converting RGB color values to hexadecimal codes is one of the most common tasks in web development and design. Whether you’re building a design system, creating CSS custom properties, or exporting a cohesive color palette, having a reliable tool saves hours of manual work. This generator instantly converts any RGB value to its hex equivalent, outputs ready-to-use CSS variables, and lets you build and export entire palettes in seconds.
Interactive RGB to Hex Converter & Palette Builder
HEX #4287F5 RGB rgb(66, 135, 245) CSS Variable —color-primary: #4287F5; Copied to clipboard!
How RGB to Hex Conversion Works
The RGB color model defines colors using three channels — Red, Green, and Blue — each ranging from 0 to 255. A hexadecimal color code is simply a compact representation of these same three values expressed in base-16 notation. Each pair of hex digits corresponds to one channel: #RRGGBB.
The Conversion Formula
To convert a single RGB channel value to hex, divide the decimal number by 16. The quotient becomes the first hex digit, and the remainder becomes the second. For example, R=66 gives 66÷16 = 4 remainder 2, resulting in 42. Programmatically, most languages provide a toString(16) method that handles this instantly.
| RGB Value | Calculation | Hex Result |
|---|---|---|
| 255, 0, 0 | FF, 00, 00 | #FF0000 (Red) |
| 0, 128, 255 | 00, 80, FF | #0080FF (Blue) |
| 34, 197, 94 | 22, C5, 5E | #22C55E (Green) |
| 0, 0, 0 | 00, 00, 00 | #000000 (Black) |
:root block and reference them everywhere with var(--color-name). This approach offers several advantages:
- **Single source of truth** — change one variable, update every instance site-wide.- **Theme switching** — swap entire color schemes by overriding variables on a parent element.- **Design system alignment** — named variables like --color-brand-primary map directly to design tokens.- **Runtime manipulation** — JavaScript can read and modify CSS variables dynamically without class toggling.
### Best Practices for CSS Variable Naming
Use a consistent naming convention for your color variables. A popular pattern is --color-{purpose}-{variant}, such as --color-brand-500 or --color-text-secondary. Avoid names tied to appearance like --blue; instead use semantic names like --color-info so your palette remains meaningful even after rebranding.
Exporting Your Color Palette
The generator above supports three export formats to fit any workflow:
- CSS Variables — Outputs a complete
:rootblock ready to paste into your stylesheet.- JSON — Produces a key-value object ideal for JavaScript-based design token systems, Tailwind config files, or API responses.- SCSS Variables — Generates Sass variable declarations for projects using preprocessors.Each export copies the result to your clipboard automatically, so you can paste it directly into your project without manual formatting.
Frequently Asked Questions
What is the difference between RGB and Hex color codes?
RGB and Hex represent the same color information in different formats. RGB uses three decimal numbers from 0 to 255 — for example, rgb(66, 135, 245). Hex uses a single six-character string in base-16 notation prefixed with a hash — #4287F5. Both are fully supported in CSS. Hex is more compact and widely used in design tools, while RGB is easier to read and manipulate mathematically in code.
How do I add CSS variables to my existing project?
Add a :root block at the top of your main CSS file and define your color variables there. Then replace hard-coded color values throughout your stylesheets with var(—variable-name). Use the palette builder above to generate the entire :root block, export it, and paste it into your CSS. Existing styles will continue to work — you can migrate incrementally by replacing one color at a time.
Can I use this tool for Tailwind CSS or design token systems?
Yes. Export your palette as JSON, then map the key-value pairs into your tailwind.config.js under the theme.extend.colors section. For design token systems like Style Dictionary or Tokens Studio, the JSON output provides the exact structure most token pipelines expect. You can also use the CSS variable export directly with Tailwind’s var() support in version 4 and above.