Meta tags:
description=Build an HTML hex color from RGB channels; live preview and instant RGB / HSL conversion.;

Headings (most frequently used words):

hex, calculator, color, about, the, examples, frequently, asked, questions, related, tools, learn, more,

Text of the page (most frequently used words):
color (49), the (44), hex (44), and (31), rgb (23), hsl (21), learn (15), css (12), you (10), code (9), this (9), html (8), tool (8), channel (8), 255 (8), tools (7), from (7), for (6), named (6), value (6), hwb (6), cmyk (6), into (6), each (6), #calculator (6), const (6), w3docs (5), all (5), colors (5), same (5), sliders (5), channels (5), also (5), digit (5), field (5), with (5), formatter (5), generator (4), tomato (4), accepts (4), convert (4), one (4), picker (4), that (4), when (4), text (4), then (4), 100 (4), tohex (4), math (4), json (3), encoder (3), editor (3), snippets (3), quizzes (3), exercises (3), php (3), javascript (3), against (3), names (3), its (3), tailwind (3), them (3), form (3), hsla (3), rgba (3), base (3), digits (3), runs (3), conversion (3), live (3), 2563eb (3), three (3), ff6347 (3), paste (3), parseint (3), slice (3), your (3), copy (3), string (3), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), about (2), beautifier (2), diff (2), password (2), python (2), java (2), git (2), books (2), examples (2), mixer (2), full (2), table (2), lesson (2), every (2), format (2), contrast (2), converter (2), instead (2), split (2), red (2), green (2), blue (2), lightness (2), highest (2), whichever (2), how (2), back (2), automatically (2), parse (2), like (2), ff0000 (2), does (2), need (2), any (2), preview (2), wrong (2), whatever (2), type (2), dodgerblue (2), can (2), two (2), 235 (2), normalizes (2), parsecolor (2), 144 (2), 1e90ff (2), round (2), what (2), slider (2), rgbtohex (2), log (2), readout (2), rrggbb (2), converting (2), swatch (2), hash (2), 2026, rights, reserved, made, developers, language, privacy, policy, contact, company, try, practice, free, tutorials, web, since, 2014, including, friends, cross, referenced, their, values, explained, ground, more, map, nearest, palette, class, find, closest, check, pair, wcag, aaa, thresholds, checker, across, view, pick, visually, dragging, already, links, here, once, have, related, scaled, fraction, average, lowest, saturation, comes, spread, between, relative, hue, derived, standard, formula, calculated, not, typing, optional, gets, added, input, case, insensitive, identically, shorthand, accepted, expanded, 00ff88, 0f8, symbol, means, typed, didn, match, recognized, known, name, clicked, out, keep, showing, last, valid, until, enter, parses, why, show, yes, such, addition, parsed, converted, equivalent, padding, single, leading, zero, join, prefix, example, becomes, drag, frequently, asked, questions, describe, parser, recognizes, 148, character, chunks, either, see, 210, individual, clamp, left, pad, exactly, change, max, min, tostring, padstart, console, compute, reach, handed, notation, codebase, designer, triplet, variable, config, anywhere, else, expects, per, next, helps, debugging, hand, checking, computed, nibble, deep, link, query, parameter, share, bookmark, specific, state, everything, client, side, browser, there, network, request, data, leaves, page, parsing, small, dispatcher, tries, regex, lookup, patterns, turn, matches, plain, object, rounds, clamps, pads, drives, shown, below, builds, other, way, around, isn, only, canonical, shows, current, equivalents, sit, underneath, click, buttons, use, our, build, instant, home, search, formatters, url, reverse, sha256, md5, length, general, courses,

Text of the page (random words):
hex color calculator w3docs w3docs books learn html learn css learn javascript learn git learn java learn php learn python courses quizzes exercises snippets tools general tools html editor password generator html encoder code diff json beautifier all 13 color tools color picker color converter color mixer color hex colors hsl all 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder all 19 code formatters javascript formatter css formatter html formatter json formatter php formatter search w3docs k en english en deutsch de русский ru français fr español es português pt italiano it log in home tools color color hex color hex color calculator build a hex color from rgb channels with a live preview and instant rgb hsl conversion hex calculator rgb rgb 255 0 0 copy hsl hsl 0 100 50 copy r ff g 00 b 00 use this color in our color picker about the hex color calculator this tool builds a 6 digit hex color rrggbb from three rgb channel sliders or the other way around paste a color into the text field and it normalizes to hex the field isn t hex only it also accepts rgb rgba hsl hsla hwb cmyk and css named colors like tomato converting whatever you paste to the same canonical hex a live swatch shows the current color and the rgb hsl equivalents sit underneath with one click copy buttons everything runs client side in your browser there is no network request and no color data leaves the page parsing is a small dispatcher parsecolor that tries a hex regex then a named color lookup table then rgb hsl hwb and cmyk patterns in turn converting whichever one matches into a plain r g b object rgbtohex then rounds and clamps each channel to 0 255 and pads it to two hex digits the same conversion also drives the rgb to hsl readout shown below the swatch reach for this when you re handed a color in the wrong notation for your codebase a designer s hsl 9 100 64 or an rgb triplet from a picker and need the rrggbb form for a css variable a tailwind config or anywhere else your code expects hex the per channel hex readout next to each slider also helps when debugging color math by hand e g checking a computed channel value against its hex nibble you can deep link a color with a color query parameter e g color hex color 2563eb to share or bookmark a specific state examples rgb channels to hex what the sliders compute js const tohex n math max 0 math min 255 math round n tostring 16 padstart 2 0 const hex tohex 37 tohex 99 tohex 235 console log hex 2563eb clamp each channel to 0 255 round it convert to base 16 and left pad to 2 digits this is exactly what the tool s rgbtohex runs on every slider change hex back to individual rgb channels js const hex 1e90ff const r parseint hex slice 1 3 16 30 const g parseint hex slice 3 5 16 144 const b parseint hex slice 5 7 16 255 split the 6 digit hex into three 2 character chunks and parse each as base 16 1e90ff is the css named color dodgerblue paste either form into the tool and you ll see the same rgb 30 144 255 hsl 210 100 56 the text field also accepts rgb hsl and color names text tomato ff6347 rgb 255 99 71 ff6347 hsl 9 100 64 ff6347 all three describe the same color this tool s parser parsecolor recognizes hex rgb rgba hsl hsla hwb cmyk and 148 css color names and normalizes any of them to hex frequently asked questions how do i convert rgb to a hex color code convert each of the red green and blue channels 0 255 to a two digit base 16 value padding single digits with a leading zero then join them with a prefix for example rgb 37 99 235 becomes 2563eb this calculator runs that conversion live as you drag the r g and b sliders can i type an rgb or hsl value instead of a hex code yes the color field accepts rgb rgba hsl hsla hwb cmyk and css named colors such as tomato or dodgerblue in addition to hex whatever you type is parsed and converted to the equivalent hex code automatically why does the tool show wrong color it means the text you typed didn t match any recognized color format hex rgb hsl hwb cmyk or a known color name when you clicked out of the field the sliders and preview keep showing the last valid color until you enter one that parses does a hex color code need the symbol not when typing into this tool the is optional and gets added back automatically hex input is also case insensitive ff0000 and ff0000 parse identically and shorthand 3 digit hex like 0f8 is accepted and expanded to its full 6 digit form 00ff88 how is the hsl value calculated from a hex color the hex code is split into red green and blue channels each scaled to a 0 1 fraction lightness is the average of the highest and lowest channel saturation comes from the spread between them relative to that lightness and hue is derived from whichever channel is highest the standard css hsl formula related tools color picker pick a color visually instead of dragging channel sliders this tool already links here once you have a hex value color converter convert the same color across hex rgb hsl hwb and cmyk in one view color contrast checker check a hex color pair against wcag aa aaa contrast thresholds find the closest tailwind css color map a hex value to its nearest tailwind css palette class learn more lesson html colors every color format this tool accepts hex rgb hsl and named colors explained from the ground up lesson css color names the full named color table including tomato and friends cross referenced against their hex values color mixer color hsl w3docs free tutorials examples exercises snippets and quizzes for the web since 2014 books learn html learn css learn javascript learn git learn java learn php learn python practice exercises quizzes snippets try it editor tools html editor password generator html encoder code diff json beautifier company about contact privacy policy language english deutsch русский français español português italiano 2026 w3docs all rights reserved made for developers