Choose a color
Enter a three- or six-digit HEX code, use the color picker, or set the RGB channels.
HEX to RGB and RGB to HEX Color Converter for CSS Values
Convert HEX and RGB colors, preview the result, copy CSS values, and use the color in an image background.
Free to use. No signup or watermark.#7770C7
HEX and RGB conversions for CSS colors and image backgrounds
Move a color between design tools and code without guessing its values. Convert a HEX code into RGB channels, or enter RGB values to find the equivalent HEX notation. The live swatch lets you check the result before copying a CSS color value. You can then use that color as the starting point for a plain background image. For a HEX to RGB example, #336699 converts to rgb(51, 102, 153), while the short HEX #369 expands to the same color; copy the notation your destination expects.
Ways to use the color converter
Translate a brand HEX code into RGB values.
Copy a CSS color for a website background.
Create a plain image from a precisely specified color.
How to convert HEX to RGB and copy a CSS color
HEX and RGB are two ways to write the same channel values. Conversion changes the notation, rather than creating a new shade or correcting a display.
Read HEX color channels in red, green and blue order
A six-digit HEX code uses two digits each for red, green, and blue. #336699 becomes RGB(51, 102, 153). Each channel ranges from 0 to 255. A three-digit code expands by repeating each digit, so #369 represents the same values as #336699.
Copy notation your destination accepts
Use the HEX copy control for a color field that expects a #RRGGBB value, or copy RGB notation into a stylesheet. The linked plain-image generator can create a file using the selected color. This converter handles opaque RGB colors, not CMYK print separations or color-profile conversion.
Recognize invalid input
An incomplete or unsupported HEX string leaves the last valid preview in place until you enter a valid value. Do not treat that preview as a successful conversion of the invalid text. Display brightness and color management can still make identical channel values look different across devices.
Need help choosing a file? Read the image format guide or compare common pixel dimensions.
How to use the free color converter tool
Copy your values
Copy the HEX or RGB notation for use in a stylesheet, design file, or document.
Use your new color
Open the plain or gradient image generator with your color already selected.
Color Converter: questions & answers
Everything you need before your next download.
Do HEX and RGB describe different colors?
They are different notations for the same RGB channel values. For example, #ffffff and rgb(255, 255, 255) both represent white.
Why do RGB channels range from 0 to 255?
Each channel in this converter is represented by an 8-bit value, giving 256 possible levels from 0 through 255. Together, the three channels specify the red, green, and blue components.
Start your next creation with a simple image
Set the mood for a social post, refresh your wallpaper, or give a presentation a clean opening. Pick a canvas and make it yours.
Set the scene for your next post
Start with a 1080 × 1080 post or a 1080 × 1920 story. Pick colors that feel like you, download your background, then add photos and text in your usual editor.
Put your favorite colors on your screen
A soft sunset gradient or a quiet wash of color can make a screen feel like yours. Choose a 4K desktop canvas or a portrait phone size, then build a wallpaper around your own palette.
Give your next presentation a clean opening
Leave room for your ideas with a white canvas, or set the tone with a simple gradient. Start at 1920 × 1080, then add your title in a slide app or use the background for a project cover.