MultiTools
Home
Age Calculator BMI Calculator Days Calculator Add/Subtract Time Discount Calculator EMI Calculator GST Calculator Loan Calculator Percentage Calculator SIP Calculator
Area Converter Data Storage Converter Length Converter Temperature Converter Volume Converter Weight Converter
Case Converter Character Counter Lorem Ipsum Generator Remove Duplicate Lines Word Counter
Base64 Encode/Decode Binary to Text CSS Formatter CSV to JSON HTML Formatter JS Formatter JSON Formatter JSON to CSV JSON to XML MD5 Generator Password Generator RGB to Hex SHA-256 Generator Text to Binary Timestamp Converter URL Encode/Decode XML Formatter XML to JSON
About Us Contact Us Privacy Policy Terms of Service Disclaimer

RGB to HEX Converter

Convert Red, Green, and Blue values into CSS HEX codes instantly. Use the sliders to find the perfect shade for your project.

Adjust RGB Values

Quick Presets

RGB, HEX and HSL: One Colour, Three Notations

Screens create colour by mixing red, green and blue light. Every colour you see on a website or app can be described by how much of each it contains. Designers and developers write those amounts in different formats depending on the tool: CSS often uses HEX codes like #FCA311, image editors show RGB values like rgb(252, 163, 17), and HSL is handy for building colour palettes.

This converter lets you pick a colour with sliders and instantly gives you the matching HEX, RGB and HSL codes, ready to copy into your stylesheet or design file.

How to Use the RGB to HEX Converter

  1. Move the Red, Green and Blue sliders, or type values from 0 to 255.
  2. Watch the preview box update as you adjust.
  3. Click a Quick Preset to start from a common colour.
  4. Copy the HEX, RGB or HSL code with one click.

How RGB to HEX Conversion Works

HEX is simply the three RGB numbers written in base 16 (hexadecimal), where digits run 0–9 and then A–F. Each colour channel becomes two hex digits.

HEX = # + hex(R) + hex(G) + hex(B)

Example: RGB(252, 163, 17)

  • 252 ÷ 16 = 15 remainder 12 → F, C → FC
  • 163 ÷ 16 = 10 remainder 3 → A, 3 → A3
  • 17 ÷ 16 = 1 remainder 1 → 1, 1 → 11

Result: #FCA311 — the warm orange used as the accent colour on this website.

To go back from HEX to RGB, split the code into pairs and convert each from base 16: 14 = 20, 21 = 33, 3D = 61, so #14213D = rgb(20, 33, 61).

Common Colour Codes

ColourHEXRGB
Black#0000000, 0, 0
White#FFFFFF255, 255, 255
Red#FF0000255, 0, 0
Green#00FF000, 255, 0
Blue#0000FF0, 0, 255
India saffron#FF9933255, 153, 51
India green#13880819, 136, 8
Navy blue#0000800, 0, 128

When to Use Each Format

  • HEX — compact and universal in CSS, HTML, Figma and brand guidelines.
  • RGB / RGBA — useful when you need transparency (rgba(0, 0, 0, 0.5)) or when changing colours with JavaScript.
  • HSL — best for building palettes: keep the hue, then raise or lower the lightness to get tints and shades that clearly belong together.

Colour and Accessibility

Good-looking colours are not always readable. The Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5:1 between normal text and its background. Light grey text on white, or yellow on white, often fails this test. Dark navy on white or white on dark navy usually passes comfortably. Always check contrast for buttons and body text, especially for users with low vision or on bright mobile screens outdoors.

Related Tools

Frequently Asked Questions

Convert each of the red, green and blue values (0–255) to a two-digit hexadecimal number and join them after a # sign. For example, RGB(252, 163, 17) becomes FC, A3 and 11, giving #FCA311.
They describe exactly the same colours in different notation. RGB lists three decimal numbers, such as rgb(20, 33, 61), while HEX writes the same values in base 16, such as #14213D. HEX is shorter and very common in CSS and design tools.
HSL stands for Hue, Saturation and Lightness. Hue is the colour angle on a wheel (0–360°), saturation is how vivid it is and lightness is how close to black or white. It is useful for creating lighter or darker shades of the same colour.
It is a shorthand where each digit is doubled. #F80 is the same as #FF8800. It only works when each pair has two identical digits.
Each channel has 256 levels, so 256 × 256 × 256 = 16,777,216 possible colours.
Use an 8-digit HEX code, where the last two digits are the alpha (opacity) value, for example #FCA31180 for about 50% opacity. Alternatively use rgba(252, 163, 17, 0.5) in CSS.