Copied to clipboard!
Real Colour Picker
Real Colour
sRGB Decimals to Hexadecimal · CSS Color Level 4
Need Reverse? HEX to RGB →

RGB to HEX Color Converter

Convert Red, Green, Blue decimal channels (0–255) and alpha opacity into 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) Hexadecimal color codes in real-time.

Live reactive update
Red (R):
Hex: 3B
Green (G):
Hex: 82
Blue (B):
Hex: F6
Alpha / Opacity (A):
Hex: FF100%
View Harmonies in Wheel→
Popular Presets:Click any shade to test
HEX Output
Royal Blue
#3B82F6rgb(59, 130, 246)
vs White: 3.68:1 (AA Lg)vs Black: 5.71:1 (AAA)

Color Code Conversion Table

Equivalent values across web standards, CSS Color Level 4, and application models.

Real-Time Sync
Color Code Multi-Format Conversion Reference Table
Color SpaceRaw ValueSyntax / Value StringActions
HEX#3B82F6#3B82F6
RGB59, 130, 246rgb(59, 130, 246)
HSL217°, 91%, 60%hsl(217deg 91% 60%)
HWBCSS 4
217°, 23%, 4%hwb(217deg 23% 4%)
HSVApp / Print Format
217°, 76%, 96%hsv(217, 76%, 96%)
OKLCH0.62, 0.19, 254oklch(0.62 0.19 254)
CMYKApp / Print Format
76%, 47%, 0%, 4%cmyk(76%, 47%, 0%, 4%)

RGB to HEX Mathematical Breakdown:

Base-16 positional logic

Common RGB to HEX Conversions

Quick reference table for the most widely used web and UI colors. Click "Load" to test any shade in the converter above.

20 Core Web Standards
Common RGB to HEX Conversions
ColorNameRGB (R, G, B)HEX CodeHSLActions
Blackrgb(0, 0, 0)#0000000°, 0%, 0%
Whitergb(255, 255, 255)#FFFFFF0°, 0%, 100%
Redrgb(255, 0, 0)#FF00000°, 100%, 50%
Limergb(0, 255, 0)#00FF00120°, 100%, 50%
Bluergb(0, 0, 255)#0000FF240°, 100%, 50%
Yellowrgb(255, 255, 0)#FFFF0060°, 100%, 50%
Cyan / Aquargb(0, 255, 255)#00FFFF180°, 100%, 50%
Magenta / Fuchsiargb(255, 0, 255)#FF00FF300°, 100%, 50%
Silverrgb(192, 192, 192)#C0C0C00°, 0%, 75%
Grayrgb(128, 128, 128)#8080800°, 0%, 50%
Maroonrgb(128, 0, 0)#8000000°, 100%, 25%
Navyrgb(0, 0, 128)#000080240°, 100%, 25%
Tealrgb(0, 128, 128)#008080180°, 100%, 25%
Purplergb(128, 0, 128)#800080300°, 100%, 25%
Orangergb(255, 165, 0)#FFA50039°, 100%, 50%
Royal Bluergb(65, 105, 225)#4169E1225°, 73%, 57%
Emeraldrgb(16, 185, 129)#10B981160°, 84%, 39%
Indigorgb(99, 102, 241)#6366F1239°, 84%, 67%
Coralrgb(255, 127, 80)#FF7F5016°, 100%, 66%
Amberrgb(245, 158, 11)#F59E0B38°, 92%, 50%
#RRGGBBAA Suffix Cheat SheetCSS Color Level 4

HEX Opacity & Alpha Channel Reference

Quick reference lookup mapping opacity percentages to their 2-digit Hexadecimal alpha suffixes. Click "Set" to test any opacity on the live converter above.

Formula: Math.round(Pct% × 255) → Hex
100%#FF
255/255
95%#F2
242/255
90%#E6
230/255
85%#D9
217/255
80%#CC
204/255
75%#BF
191/255
70%#B3
179/255
60%#99
153/255
50%#80
128/255
40%#66
102/255
30%#4D
77/255
25%#40
64/255
20%#33
51/255
10%#1A
26/255
5%#0D
13/255
0%#00
0/255
Computer Science Fundamentals

Understanding Base-16 Positional Math & Alpha Suffixes

Hexadecimal is a base-16 positional numeral system. An 8-bit byte holds values from 0 to 255 (2⁸ = 256 possible states), which maps precisely onto two hexadecimal characters (16 × 16 = 256).

Step 1: Decimal Normalization (Channel × 255)

For opacity percentages (e.g. 80%), multiply by 255 and round to the nearest integer:

0.80 × 255 = 204

Step 2: Division by 16 (High-order quotient & low-order remainder)

Divide decimal by 16 to extract the high-order quotient and low-order remainder:

204 ÷ 16 = 12 (rem: 12)

Step 3: Hex Digit Substitution (Base-16 character mapping)

Map 0–15 to base-16 digits (10=A … 12=C):

12 & 12 → "CC" (#CC)

Shorthand Expansion Rules:

CSS Color specifications permit concise 3-digit and 4-digit hexadecimal shorthand by duplicating each individual character into an identical 2-digit nibble pair:

  • 3-digit Hex #369 → #336699
  • 4-digit Hex #369C → #336699CC (80% alpha)
Color Engineering & Base-16 Digital Color Standards

The Ultimate RGB to HEX Converter: Base-16 Color Engineering & Developer Guide

The rgb to hex converter on Real Colour Picker transforms integer triplet channels into concise hexadecimal strings instantly. Operating as a high-precision rgb to hex tool, convert rgb to hex utility, and rgb to hex code finder, our studio bridges the gap between hardware framebuffers and modern stylesheet architecture.

Whether styling interfaces, managing design tokens, or learning how to convert rgb to hex, this in-browser rgb to hex conversion suite handles every format. From classical 6-digit codes to modern rgb to hex with opacity and 8-digit alpha channels, calculations run client-side in memory with zero cloud latency. Acting as your dedicated color rgb to hex generator, rgb to hexadecimal translator, and RGB HEX code finder, our color picker ensures sub-pixel precision across every display.

Understanding the RGB to Hex Formula: Base-16 Positional Mathematics

The mathematical rgb to hex formula is rooted in base-16 positional notation. Standard sRGB screens render colors by mixing Red, Green, and Blue channels across 256 intensity levels (0–255). An 8-bit byte ($2^8 = 256$) maps to two hex digits ($16 \times 16 = 256$), with decimal values 10–15 denoted as A–F.

To compute hexadecimal values manually using our Rgb to hex base 16 math formula calculator algorithm:

  1. Integer Division: Divide channel value by 16 to get high-order quotient (Q = Math.floor(channel / 16)).
  2. Modulus Remainder: Compute remainder (R = channel % 16) to get the second low-order digit.
  3. Hex Substitution: Map values greater than 9 to characters (10=A, 11=B, 12=C, 13=D, 14=E, 15=F).
Formal Base-16 Conversion Formula & Boundary Cases
#RRGGBB = '#' + pad(hex(R)) + pad(hex(G)) + pad(hex(B))
Boundary: rgb(0, 0, 0) = #000000 | rgb(255, 255, 255) = #FFFFFF

When calculating an Rgb 0 0 0 to hex conversion for pure black, both high and low nibbles evaluate to zero (#000000). Similarly, for RGB percent to hex conversions, percentages are normalized against 255 (decimal = Math.round(percentage * 2.55)) before applying base-16 division. With our interactive RGB Hex picker, you can verify every color coordinate instantly.

RGBA to HEX Conversion: 8-Digit Hex Codes & CSS Alpha Transparency

Prior to CSS Color Module Level 4, opacity required rgba(r, g, b, a) function notation because traditional 6-digit hex lacked an alpha channel. Modern browsers now support 8-digit hexadecimal colors (#RRGGBBAA), enabling concise opacity declarations across stylesheets, SVG vectors, and tokens.

To convert rgb to 8 digit hex with alpha online, our RGBA to HEX engine translates alpha (0.0–1.0 or 0%–100%) into an 8-bit integer: AlphaByte = Math.round(alpha * 255). This is formatted as a 2-digit hex suffix; 50% opacity (0.5 × 255 ≈ 128) maps to #80, making pure blue at half transparency #0000FF80.

For legacy environments lacking 8-digit hex support:

  • RGBA to HEX 6-digit: Discard trailing alpha bytes to yield standard #RRGGBB tokens when opacity is not supported.
  • Convert rgba to hex without opacity: Composite foreground RGB values against a solid backdrop using alpha-blending equations before converting to hexadecimal.

RGB to HEX in Code: Python, JavaScript, and Java Implementations

Software engineers frequently implement color conversion in backend scripts and build pipelines. Whether building an RGB to hex converter Python script, crafting an Rgb to hex base 16 math formula python routine, or executing an Rgb to hex base 16 math formula javascript utility, handling single-digit padding ensures uniform 6-character output:

RGB to hex js (JavaScript / TypeScript):const rgbToHex = (r, g, b) => '#' + [r, g, b].map(x => Math.max(0, Math.min(255, x)).toString(16).padStart(2, '0')).join('').toUpperCase();
RGB to hex Python (Python 3 f-string):def rgb_to_hex(r: int, g: int, b: int) -> str:
    return f"#{r:02X}{g:02X}{b:02X}"
RGB to hex java (Java String.format):public static String rgbToHex(int r, int g, int b) {
    return String.format("#%02X%02X%02X", r, g, b);
}

In performance-critical JavaScript loops, developers frequently use bitwise shifts for hex string formatting with guaranteed leading zeros:

const hex = ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

Here, (1 << 24) acts strictly as a sentinel bit ensuring an exact 7-character string before slicing off index 0. By contrast, when packing opaque pixels into a 32-bit ARGB image buffer or HTML5 Canvas ImageData buffer, you must pack the full 255 alpha byte into bit positions 24–31 using bitwise OR:

const pixel = (0xFF << 24) | (r << 16) | (g << 8) | b;

Wide Gamut Color Spaces: sRGB, Adobe RGB, Display P3 & LRV to HEX

Hexadecimal codes on the web historically target the standard sRGB to HEX color space (IEC 61966-2-1). However, modern displays and creative workflows interact with wider color spaces:

  • Display P3 (DCI-P3 Wide Gamut): Modern smartphone OLED displays and Apple Retina screens cover Display P3, offering roughly 25% wider color gamut coverage than standard sRGB (specifically expanding vibrant greens and punchy reds). A P3 to hex converter maps wide-gamut values into sRGB boundaries or exports CSS Color 4 declarations.
  • Adobe RGB (1998): Popular in professional digital photography and print production. An Adobe RGB to HEX workflow requires matrix transformation and gamut clipping to prevent color shifting on standard monitors.
  • LRV to HEX (Light Reflectance Value): Light Reflectance Value measures the percentage of visible light reflected by a surface on a scale from 0% (pure black) to 100% (pure white). Architectural paint manufacturers, interior designers, and ADA accessibility auditors utilize Lrv to hex calculations derived from relative luminance to specify compliant wall coatings and door trims.
  • RGB to HSV Converter: Translating RGB channels to Cylindrical Hue, Saturation, and Value provides an intuitive visual model for artists generating harmonic palettes.

Utilize our Rgb to hex converter for css variables online to convert CSS RGB to hex tokens seamlessly into Tailwind CSS v4 @theme blocks and CSS custom properties.

Step-by-Step: How to Convert RGB to HEX Color Codes Online

Follow this 5-step engineering workflow to convert RGB decimal values, tune alpha transparency, verify base-16 conversions, and export certified design tokens.

1

Input RGB Channels

Enter integer values from 0 to 255 for Red, Green, and Blue, or drag interactive color sliders in real-time.

2

Set Alpha Opacity

Optionally specify alpha transparency from 0% to 100% to generate modern 8-digit #RRGGBBAA hexadecimal strings.

3

Inspect Hex Output

Review the calculated 6-digit or 8-digit hexadecimal code alongside simultaneous conversions to HSL, CMYK, and OKLCH.

4

Verify Gamut & LRV

Examine color space boundaries across sRGB and Display P3, verifying Light Reflectance Values (LRV) and contrast accessibility.

5

Export Design Tokens

Copy the certified hexadecimal code in 1 click or export custom properties to Tailwind CSS v4 @theme and CSS variables.

RGB to HEX & Base-16 Color FAQs

Frequently Asked Questions

Comprehensive developer and mathematical answers on converting RGB decimal channels (0–255) to 6-digit (#RRGGBB) and 8-digit (#RRGGBBAA) hex codes, base-16 positional formulas, and modern CSS color standards.

28 Answers
01

How to calculate RGB to hex?

To calculate a hexadecimal color code from decimal RGB (Red, Green, Blue) values, convert each 8-bit channel (0–255) into a two-digit base-16 hexadecimal number using division and remainders:

  1. Divide by 16 for the first digit: Divide the channel value by 16 and take the whole integer quotient: Quotient = Math.floor(Channel / 16). This represents the high-order (sixteens) hexadecimal digit.
  2. Calculate the remainder for the second digit: Find the modulus remainder: Remainder = Channel % 16. This represents the low-order (ones) hexadecimal digit.
  3. Substitute values 10–15 with letters: If the quotient or remainder is 10 or greater, substitute it with its hex letter equivalent: 10=A, 11=B, 12=C, 13=D, 14=E, 15=F. Single digits 0–9 stay as digits.
  4. Concatenate the channel pairs: Combine the 2-digit pairs for Red, Green, and Blue, preceded by a hash symbol: #RRGGBB.

Quick Example: For orange rgb(255, 165, 0): Red 255 becomes FF, Green 165 becomes A5 (165 / 16 = 10 [A], rem 5), and Blue 0 becomes 00 → yielding #FFA500.

02

How do you calculate a 6-digit HEX code from RGB decimal values manually?

To calculate a 6-digit HEX code manually using pencil and paper, follow this step-by-step mathematical breakdown using Blue Violet rgb(138, 43, 226) as a working example:

  • Step 1: Calculate Red (R = 138)
    • Divide 138 by 16: 138 / 16 = 8.625 → Integer quotient = 8
    • Calculate remainder: 138 - (8 × 16) = 138 - 128 = 10 → 10 converts to A
    • Red hex pair = 8A
  • Step 2: Calculate Green (G = 43)
    • Divide 43 by 16: 43 / 16 = 2.6875 → Integer quotient = 2
    • Calculate remainder: 43 - (2 × 16) = 43 - 32 = 11 → 11 converts to B
    • Green hex pair = 2B
  • Step 3: Calculate Blue (B = 226)
    • Divide 226 by 16: 226 / 16 = 14.125 → Integer quotient = 14 (converts to E)
    • Calculate remainder: 226 - (14 × 16) = 226 - 224 = 2 → Remainder is 2
    • Blue hex pair = E2
  • Step 4: Assemble Final Hex Code

    Join the three pairs together with a leading hash: #8A2BE2.

03

What base-16 substitutions apply to division remainders?

In base-16 (hexadecimal) positional mathematics, single digits range from 0 to 15. Because standard Arabic decimal numerals only contain symbols for 0 through 9, decimal values from 10 to 15 are substituted with capital letters from A to F:

Decimal Value (0–9) Hex Symbol Decimal Remainder (10–15) Hex Substitution
0 to 90 to 9 (no change)10A
--11B
--12C
--13D
--14E
--15F

This 1-to-1 mapping guarantees that every integer byte from 0 to 255 (16 × 16 = 256 states) is represented by exactly two hexadecimal characters without ambiguity.

04

What color is 666666?

#666666 (equivalent to rgb(102, 102, 102)) is a balanced medium-dark gray, commonly recognized in web design as "Dim Gray" or "Web Safe Charcoal".

  • Color Composition: It contains equal intensities of Red (102), Green (102), and Blue (102). Because all three primary channels are equal, its chromatic saturation is 0% (completely neutral/achromatic).
  • Photometric Characteristics: Its relative luminance is approximately 0.133, and its Light Reflectance Value (LRV) is ~13.3%, absorbing nearly 87% of visible light.
  • Accessibility & WCAG 2.2 Contrast: When paired with pure white (#FFFFFF), #666666 achieves a contrast ratio of 5.74:1. This comfortably passes WCAG 2.2 Level AA requirements (minimum 4.5:1) for standard body copy and Level AAA for large text (≥24px or ≥18.66px bold).
  • UI Usage: Widely used for secondary body text, icon outlines, placeholder text, and muted interface borders that need high readability without the harsh optical contrast of pitch black.
05

Is hex code base-16?

Yes, hex code is strictly a base-16 positional numeral system. The word "hexadecimal" combines the Greek root hexa (six) and the Latin root decem (ten), meaning sixteen.

  • Base-10 (Decimal) vs. Base-16 (Hex): Our everyday counting system uses base-10 with ten symbols (0–9). Hexadecimal uses sixteen distinct symbols: digits 0 through 9 followed by letters A through F (representing values 10 through 15).
  • Why Hexadecimal Fits Computers & Color: Digital computers process data in binary bits (0 and 1). Four bits (one "nibble") have exactly 16 possible states (2^4 = 16), which matches one hexadecimal digit. An 8-bit byte (2^8 = 256 states, 0–255) maps into exactly two hexadecimal digits (16 × 16 = 256, from 00 to FF).
  • This makes base-16 hex the most compact, human-readable way to encode 24-bit RGB pixel channels without dealing with long binary strings like 11111111 00000000 00000000.
06

How to convert hex to RGB value?

To convert a 6-digit hexadecimal color code (#RRGGBB) back to decimal RGB values:

  1. Split into three pairs: Separate the string into two-character pairs for Red, Green, and Blue (e.g. for #3B82F6: Red = 3B, Green = 82, Blue = F6).
  2. Apply the positional formula: Multiply the first digit by 16 and add the second digit:
    Decimal Channel = (Digit_1 × 16) + Digit_2
    Substitute letters with their numerical values: A=10, B=11, C=12, D=13, E=14, F=15.
  3. Step-by-Step Calculation:
    • Red (3B): (3 × 16) + 11 = 48 + 11 = 59
    • Green (82): (8 × 16) + 2 = 128 + 2 = 130
    • Blue (F6): (15 × 16) + 6 = 240 + 6 = 246
  4. Assemble: The result is rgb(59, 130, 246).

Shorthand Hex Note: For 3-digit shorthand like #38F, each character is duplicated first (#3388FF) before applying the formula, yielding rgb(51, 136, 255).

07

How is RGB calculated?

RGB is calculated using an additive color synthesis model that mimics human trichromatic vision. The human eye perceives color via three types of cone photoreceptors sensitive to Short (Blue ~420nm), Medium (Green ~530nm), and Long (Red ~560nm) wavelengths of light.

  • Digital 8-Bit Channel Quantization: In digital imaging (sRGB), each primary light channel is allocated 8 bits of memory ($2^8 = 256$ discrete intensity levels from 0 to 255):
    • 0: Subpixel is completely turned off (0% light emission).
    • 255: Subpixel shines at maximum brightness (100% light emission).
  • Calculating from Percentage: When converting percentage intensity (0% to 100%) into integer channel values:
    Channel = Math.round((Percentage / 100) × 255)
    For example, 75% intensity produces Math.round(0.75 × 255) = 191.
  • Total Combinations: Combining three 8-bit channels yields 256 × 256 × 256 = 16,777,216 possible 24-bit TrueColor hues.
08

Is RGB a hex code?

No, RGB is not a hex code. While both formats represent the exact same additive color coordinates on your screen, they are two distinct notation systems:

  • RGB (Decimal Triplet): Written using base-10 decimal numbers (0–255) or percentages inside a CSS function: e.g. rgb(255, 99, 71) or modern CSS Color 4 space-separated syntax rgb(255 99 71).
  • HEX (Hexadecimal Shorthand): Written using base-16 alphanumeric characters prefixed with a hash symbol: e.g. #FF6347.

HEX is essentially a compact hexadecimal serialization of RGB's three 8-bit bytes. Web designers and frontend engineers frequently favor HEX for design tokens and stylesheets because it takes fewer characters and avoids commas or parentheses.

09

What are the hexadecimal values for red, green, and blue?

The hexadecimal values for the three pure primary colors in the additive sRGB color model are:

  • Pure Red: #FF0000 — Red channel at 255 (100%), Green at 0, Blue at 0 (rgb(255, 0, 0)).
  • Pure Green (Lime): #00FF00 — Red channel at 0, Green at 255 (100%), Blue at 0 (rgb(0, 255, 0)).
  • Pure Blue: #0000FF — Red channel at 0, Green at 0, Blue at 255 (100%) (rgb(0, 0, 255)).

Important Web Standards Quirk: In CSS named color keywords, red is #FF0000 and blue is #0000FF, but green is defined historically as half-intensity #008000 (rgb(0, 128, 0)). Pure maximum green #00FF00 is named lime.

10

What are the hex values for RGB colors?

Here is a quick reference table of standard primary, secondary, and neutral RGB colors with their exact hexadecimal codes and channel values:

Color Name HEX Code RGB Triplet Role / Harmony
Red#FF0000rgb(255, 0, 0)Additive Primary
Lime (Pure Green)#00FF00rgb(0, 255, 0)Additive Primary
Blue#0000FFrgb(0, 0, 255)Additive Primary
Yellow#FFFF00rgb(255, 255, 0)Red + Green Secondary
Cyan / Aqua#00FFFFrgb(0, 255, 255)Green + Blue Secondary
Magenta / Fuchsia#FF00FFrgb(255, 0, 255)Red + Blue Secondary
White#FFFFFFrgb(255, 255, 255)All channels 100%
Black#000000rgb(0, 0, 0)All channels 0%
Gray (50%)#808080rgb(128, 128, 128)Midpoint Neutral
11

What is #0000FF in RGB?

#0000FF in RGB is rgb(0, 0, 255).

  • Channel Breakdown:
    • Red (00): 0 intensity in decimal.
    • Green (00): 0 intensity in decimal.
    • Blue (FF): Maximum 255 intensity in decimal ((15 × 16) + 15 = 255).
  • Colorimetric Values: In cylindrical HSL, it corresponds to hsl(240deg, 100%, 50%). In CSS Color 4 OKLCH, it evaluates to approximately oklch(0.45 0.31 264.05).
  • Perceived Luminance: Pure blue has a very low relative luminance (Y = 0.0722) because human eyes have fewer S-cone photoreceptors, making pure blue appear much darker than pure green (Y = 0.7152).
12

What is the RGB color code for white?

The RGB color code for white is rgb(255, 255, 255) (or in percentage syntax, rgb(100%, 100%, 100%)).

  • In hexadecimal notation, white is written as #FFFFFF (or 3-digit shorthand #FFF).
  • Additive Synthesis Principle: Because screens emit light additively (unlike printing ink which subtracts light), pure white is created when all three color guns—Red, Green, and Blue—fire simultaneously at 100% capacity (intensity 255).
  • Its relative luminance is 1.0 (the maximum possible on an sRGB display), and its Light Reflectance Value (LRV) is 100%.
13

What is the hexadecimal code for a 6-digit color?

A 6-digit hexadecimal color code represents color using the format #RRGGBB:

  • Prefix (#): Indicates that the subsequent sequence represents a hexadecimal color literal in HTML, CSS, SVG, and design software.
  • Red Byte (RR): First two base-16 digits controlling the Red channel (from 00 to FF, or decimal 0–255).
  • Green Byte (GG): Middle two digits controlling the Green channel (from 00 to FF).
  • Blue Byte (BB): Final two digits controlling the Blue channel (from 00 to FF).

Because each 2-digit channel spans 256 states, a 6-digit hex code can express 256 × 256 × 256 = 16,777,216 distinct colors, spanning from pure black (#000000) to pure white (#FFFFFF).

14

How to hex color in CSS?

In CSS stylesheets, you can use hexadecimal color notation across any property that accepts a <color> value (such as color, background-color, border-color, and SVG fill). CSS supports four distinct hex syntax formats:

  • 6-Digit Hex (#RRGGBB): The standard full-length syntax: .button { background-color: #3b82f6; }
  • 3-Digit Shorthand (#RGB): Allowed when each color channel consists of two identical characters: e.g. #fff expands to #ffffff, and #09f expands to #0099ff.
  • 8-Digit Hex with Alpha (#RRGGBBAA): Added in CSS Color Level 4 to specify transparency directly: .modal-backdrop { background-color: #00000080; /* 50% transparent black */ }
  • 4-Digit Shorthand with Alpha (#RGBA): Compact hex with alpha: e.g. #0008 expands to #00000088.

Hexadecimal strings in CSS are completely case-insensitive (#3B82F6 and #3b82f6 behave identically).

15

How to convert hex to RGB in CSS?

To convert or utilize hexadecimal colors as RGB in CSS stylesheets, developers use several modern techniques:

  • Modern color-mix() Function: Natively blends any hex code into the sRGB color space with custom alpha transparency without needing preprocessors: /* Renders #3b82f6 at 50% opacity in sRGB */
    background: color-mix(in srgb, #3b82f6 50%, transparent);
  • CSS Custom Properties (Channel Triplet Pattern): Store the raw decimal RGB values in a CSS variable to dynamically adjust opacity across your design system: :root { --brand-rgb: 59 130 246; }
    .card { background: rgb(var(--brand-rgb) / 0.15); }
  • CSS Relative Color Syntax (CSS Color 5): Modern browsers (Chrome 119+, Safari 16.4+, Firefox 128+) allow extracting channels directly from hex literals: .badge { background: rgb(from #3b82f6 r g b / 0.2); }
  • Sass / SCSS Preprocessors: In SCSS, built-in functions extract decimal RGB components directly: red(#3b82f6) → 59, green(#3b82f6) → 130, blue(#3b82f6) → 246.
16

How do 8-digit HEX codes (#RRGGBBAA) work in modern CSS?

Under W3C CSS Color Module Level 4, hexadecimal colors support an optional fourth byte: #RRGGBBAA.

  • The first six characters (RRGGBB) control Red, Green, and Blue, while the final two characters (AA) define the Alpha opacity channel from 00 (0% fully transparent) to FF (100% fully opaque).
  • Formula: AlphaByte = Math.round(opacity * 255).toString(16).padStart(2, '0').
  • Common Alpha Suffixes:
    • 100% Opacity: FF (255) — e.g. #0000FFFF
    • 75% Opacity: BF (191) — e.g. #0000FFBF
    • 50% Opacity: 80 (128) — e.g. #0000FF80
    • 25% Opacity: 40 (64) — e.g. #0000FF40
    • 10% Opacity: 1A (26) — e.g. #0000FF1A
    • 0% Opacity: 00 (0) — e.g. #0000FF00
  • Browser Support: Fully supported across 100% of modern evergreen web browsers (Chrome 62+, Safari 10.1+, Firefox 49+, Edge 79+).
17

What is the difference between modern rgb(r g b / a) and legacy rgba(r, g, b, a)?

The differences between modern rgb(r g b / a) and legacy rgba(r, g, b, a) stem from the W3C CSS Color Module Level 4 specification:

  • Delimiter Syntax:
    • Modern Syntax (rgb(r g b / a)): Channels are separated by whitespace, and the alpha channel is separated by a forward slash: e.g. rgb(59 130 246 / 0.5) or rgb(59 130 246 / 50%).
    • Legacy Syntax (rgba(r, g, b, a)): Requires commas between all arguments: e.g. rgba(59, 130, 246, 0.5).
  • Function Unification: In CSS Color 4, rgba() is formally aliased to rgb(). You no longer need to switch functions when toggling opacity on or off—rgb() natively accepts optional alpha.
  • Syntactic Consistency: The space-and-slash pattern is now standardized across all modern CSS color models, including hsl(217 91% 60% / 0.5), oklch(0.62 0.21 259 / 0.5), and color(display-p3 0.2 0.5 0.9 / 0.5).
  • Backward Compatibility: Browsers retain 100% backward compatibility for legacy comma-separated rgba().
18

What is the difference between RGB and RGBA colors?

The fundamental difference between RGB and RGBA is the presence of the Alpha (A) transparency channel:

  • RGB (3 Channels — Red, Green, Blue): Defines purely solid, opaque color. Every RGB pixel completely occludes whatever graphic or background lies behind it on the screen.
  • RGBA (4 Channels — Red, Green, Blue, Alpha): Adds a fourth parameter controlling opacity on a normalized scale from 0.0 (0% — fully transparent / invisible) to 1.0 (100% — completely opaque).
  • Compositing Formula: When an RGBA layer is rendered over a background, the display engine calculates the final pixel color using alpha compositing (Porter-Duff blending):
    Pixel_Output = (Foreground × α) + (Background × (1 - α))
    For example, black at 50% opacity rendered over pure white creates (0 × 0.5) + (255 × 0.5) = 127.5 → rgb(128, 128, 128).
19

What is RGBA in CSS?

In CSS, RGBA refers to the functional notation used to declare colors with adjustable alpha transparency: rgba(red, green, blue, alpha).

  • Arguments: The first three values are Red, Green, and Blue integers from 0 to 255 (or percentages 0% to 100%). The fourth value is the alpha transparency, specified either as a decimal from 0.0 to 1.0 or a percentage from 0% to 100%.
  • Example: rgba(17, 17, 17, 0.75) produces a 75% opaque dark charcoal, allowing 25% of the underlying background to shine through.
  • RGBA vs. opacity property: Applying CSS opacity: 0.5 to an element makes the entire container and all its child text/images semi-transparent. By contrast, setting an RGBA background color makes only the background translucent, leaving child typography and buttons perfectly crisp and opaque.
20

What is the difference between RGB and HSL?

While RGB and HSL can describe the exact same spectrum of colors, they organize color space from completely different perspectives:

  • RGB (Hardware-Oriented Additive Model): Expresses colors by the direct physical intensity of light emitted by Red, Green, and Blue subpixels (0–255). It is counter-intuitive for humans to manipulate: for example, making rgb(59, 130, 246) 20% lighter or 10% more saturated requires complex mathematical recalculations across all three channels.
  • HSL (Human-Perceptual Cylindrical Model): Organizes colors into three intuitive visual dimensions:
    • Hue (0°–360°): The angle on the color wheel (0° = Red, 60° = Yellow, 120° = Green, 180° = Cyan, 240° = Blue, 300° = Magenta).
    • Saturation (0%–100%): Color vividness (0% = grayscale, 100% = maximum vibrant chromatic purity).
    • Lightness (0%–100%): Perceived luminance (0% = black, 50% = pure hue, 100% = white).
  • Use Cases: RGB and HEX are the primary storage and transmission format for GPUs, digital cameras, and web tokens. HSL (along with modern OKLCH) is the preferred model for UI design systems, button hover states, and dynamic tint generation.
21

Which is better, RGB or sRGB?

Neither is inherently "better" because RGB is an abstract mathematical concept, whereas sRGB is a concrete, calibrated standard color space:

  • RGB (The Generic Model): RGB simply describes the concept of combining red, green, and blue light channels. Without a standardized color space definition, rgb(255, 0, 0) does not specify exactly what wavelength of red to emit, causing colors to look radically different across different screens.
  • sRGB (IEC 61966-2-1 Standard): Created jointly by HP and Microsoft in 1996, sRGB binds the RGB model to specific CIE chromaticity coordinates, a D65 white point (6504 K), and an agreed 2.2 gamma curve. It is the universal default color space for the World Wide Web, HTML/CSS specifications, digital cameras, and consumer displays.
  • Modern Wide Gamut Spaces: For professional colorists, newer wide-gamut spaces like Display P3 (used in Apple Retina screens) and Adobe RGB cover roughly 25% to 35% more chromatic area than standard sRGB. However, for universal web compatibility, sRGB remains the gold standard because it renders consistently across every device without color clipping.
22

How to convert RGB to decimal?

In computer graphics, 3D engines, canvas buffers, and database architectures, a 24-bit TrueColor RGB value is frequently packed into a single 32-bit unsigned integer (ranging from 0 to 16,777,215).

To convert an RGB triplet into a single decimal number, apply positional multiplication by powers of 256 ($256^2 = 65536$, $256^1 = 256$, $256^0 = 1$):

Decimal = (Red × 65536) + (Green × 256) + Blue

Or in software engineering using bitwise left-shift operators:

Decimal = (Red << 16) | (Green << 8) | Blue
  • Example 1: Pure White rgb(255, 255, 255)
    (255 × 65536) + (255 × 256) + 255 = 16,711,680 + 65,280 + 255 = 16,777,215 (#FFFFFF).
  • Example 2: Royal Blue rgb(65, 105, 225)
    (65 × 65536) + (105 × 256) + 225 = 4,259,840 + 26,880 + 225 = 4,286,945 (#4169E1).
23

How to calculate hex in calculator?

You can calculate hexadecimal values from decimal numbers using either a dedicated programmer calculator or any standard scientific calculator:

  • Method A: Using Programmer Mode (Windows / macOS Calculator)
    1. Open the Calculator application on your computer and switch the mode to Programmer (shortcut Alt+3 on Windows).
    2. Click or select DEC (Decimal mode).
    3. Enter your RGB channel number (e.g. 218).
    4. Look at the HEX line immediately above: the calculator displays the converted hex value (DA).
  • Method B: Using Standard Division on Any Basic Calculator
    1. Divide your channel number by 16: e.g. 218 / 16 = 13.625.
    2. The whole number before the decimal point is the first digit: 13 → D.
    3. Multiply the remaining decimal fraction by 16: 0.625 × 16 = 10 → A.
    4. Assemble the two characters: DA.
24

What is base 16 used for?

Base-16 (hexadecimal) is universally used across computer systems, software development, and digital media because it acts as an efficient, human-friendly shorthand for binary (base-2) data:

  • Digital Web Colors (#RRGGBB & #RRGGBBAA): Hex color notation compresses 24-bit TrueColor and 32-bit RGBA channels into clean 6-digit or 8-digit strings, avoiding cumbersome decimal functions in CSS tokens and design specs.
  • Memory Addressing & Pointers: Computer architectures reference RAM memory addresses in hex (e.g. 0x7FFF5FBFF8C0) because 32-bit and 64-bit word boundaries align with hex digits.
  • Network Hardware Addresses (MAC): Network interface cards (NICs) use 48-bit physical addresses formatted as six 2-digit hex pairs: e.g. 00:1A:2B:3C:4D:5E.
  • Cryptographic Hashes & Checksums: Security digests like SHA-256 and MD5 serialize 256-bit binary keys into 64-character hexadecimal strings.
  • Unicode Code Points: Character encodings map typographic glyphs and emojis using hex (e.g. U+0041 for 'A' or U+1F680 for 🚀).
25

How do you write 16 in hexadecimal?

In hexadecimal, the decimal number 16 is written as 10 (or prefixed as 0x10 in programming languages like JavaScript, Python, and C).

  • Why It Rolls Over: In base-10, numbers roll over from 9 to 10 when reaching the base (one ten and zero ones: 1 × 10^1 + 0 × 10^0 = 10). In base-16, single digits continue past 9 through F (15). When you add 1 to F, the value reaches sixteen and rolls over to the next positional column: one sixteen and zero ones (1 × 16^1 + 0 × 16^0 = 16).
  • In RGB Color Channels: A decimal intensity of 16 in all three channels produces rgb(16, 16, 16), which maps to hex code #101010, a deep obsidian black widely used in dark-mode UI backgrounds.
26

Can you give me an example of hexadecimal addition?

Hexadecimal addition follows the exact same positional column rules as standard decimal addition, with one key difference: values carry over to the next column when they reach or exceed 16 instead of 10.

  • Example 1 (Addition Without Carry):
    0xA + 0x5 = 0xF     /* In decimal: 10 + 5 = 15 */
  • Example 2 (Addition With Carry):
    Add 0x9 and 0x8:
    Decimal: 9 + 8 = 17
    17 / 16 = 1 with a remainder of 1 → Result: 0x11
  • Example 3 (Two-Digit Color Channel Offset):
    Add hex brightness offset 0x20 (32) to mid-tone 0x80 (128):
      0x80
    + 0x20
    ------
    Ones column: 0 + 0 = 0
    Sixteens column: 8 + 2 = 10 → A
    Sum: 0xA0 (decimal 160)
  • Byte Saturation Limit: In 8-bit RGB color processing, adding 0xFF + 0x01 = 0x100 (256). Because RGB channels are bounded between 0 and 255, software algorithms clamp results at 0xFF to avoid overflow wrapping.
27

What is 11111111 in hexadecimal?

The sequence 11111111 has two distinct interpretations depending on whether it is read as binary or decimal notation:

  • 1. As an 8-Bit Binary Byte (Base-2: 11111111_2):
    In binary computing, eight ones represent 2^7 + 2^6 + 2^5 + 2^4 + 2^3 + 2^2 + 2^1 + 2^0 = 255 in decimal. In hexadecimal, 255 is written as FF (or 0xFF). In RGB color engineering, this is the maximum possible saturation for any single channel (e.g. pure red rgb(255, 0, 0) is #FF0000).
  • 2. As a Base-10 Decimal Number (11,111,111):
    The number eleven million, one hundred eleven thousand, one hundred eleven converts to A98AC7 in hexadecimal:
    11,111,111 = (10 × 16^5) + (9 × 16^4) + (8 × 16^3) + (10 × 16^2) + (12 × 16^1) + (7 × 16^0)
    In CSS, the hex code #A98AC7 renders as a pleasing muted lavender purple.
28

What is the best RGB color?

While visual preference is subjective, in digital design, accessibility engineering, and UI architecture, the "best" RGB colors are defined by readability, ergonomic optical comfort, and WCAG 2.2 contrast compliance:

  • Best Dark Mode Background: rgb(18, 18, 18) (#121212) or rgb(15, 16, 19) (#0F1013). Recommended by Material Design and Apple HIG: unlike pitch black (#000000), soft dark obsidian eliminates optical halation (blurring of white text for astigmatic eyes) while reducing OLED power draw.
  • Best Body Text Reading Color: rgb(17, 17, 17) (#111111) or rgb(55, 65, 81) (#374151). Provides a crisp ~16:1 contrast ratio against white backdrops, delivering effortless readability without the harsh visual vibration of pure black on white.
  • Best Primary Action Accent: Vibrant electric blues and indigos like rgb(59, 130, 246) (#3B82F6) or rgb(79, 70, 229) (#4F46E5). They inspire trust, avoid color vision deficiency conflicts (unlike red/green pairings), and easily meet WCAG AA requirements with white typography.

Ready to convert RGB channels and generate hex codes?

Calculate 6-digit and 8-digit hex codes in real-time with alpha opacity and 1-click Tailwind v4 token export.

Back to Converter↑