Toolyard

HEX vs RGB vs HSL Colors

Three ways to write one color

HEX#2563D9
RGBrgb(37, 99, 217)
HSLhsl(219, 71%, 50%)

All three are the same blue. Screens mix every color from red, green and blue light, and each format is a different way of writing those amounts.

RGB and HEX

RGB gives red, green and blue from 0 to 255. HEX writes the same three numbers in base 16, two digits each: 25 is 37, 63 is 99 and D9 is 217. A short code like #FFF doubles each digit (#FFFFFF, white), and a fourth pair adds transparency (#2563D980 is about half see-through).

HSL

HSL describes a color the way people think of it: hue is the position on the color wheel in degrees (0 red, 120 green, 240 blue), saturation is how strong it is, and lightness runs from black at 0% to white at 100%. That makes it easy to make a lighter or darker shade: keep the hue and saturation, change the lightness.

CMYK is for print

Printers mix cyan, magenta, yellow and black ink instead of light. Conversions between RGB and CMYK are approximate, because screens and inks cannot show exactly the same range of colors.

Contrast for text

The WCAG accessibility guidelines ask for a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text at level AA. The Color Converter converts between all these formats and checks contrast against white and black text. To find the code of a color in a photo or screenshot, use the Image Color Picker.

Tools in this guide

More guides

How to Open HEIC Files on WindowsHow to Reduce PDF File SizeHow to Remove Location Data from PhotosHow to Extract Audio from a VideoHow to Make a Wi-Fi QR CodeHow to Sign a PDFHow to Verify a File Checksum (SHA-256)PNG vs JPG vs WebP: Which Image Format to UseHow to Merge PDF FilesHow to Copy Text from an ImageHow to Convert JPG to PDFHow to Convert a PDF to JPGHow to Split a PDF or Extract PagesHow to Rotate a PDF PermanentlyHow to Add Page Numbers to a PDFHow to Watermark a PDFHow to Convert HEIC to JPG on a MacHow to Convert WebP to JPGHow to Reduce Image File SizeHow to Convert a Video to GIFHow to Convert WAV to MP3How to Create a Strong PasswordHow to Convert Celsius to FahrenheitGB vs GiB: Why Your Drive Shows Less SpaceHow to Calculate PercentagesHow to Calculate the Number of Days Between Two DatesWhat Is a Unix Timestamp?How to Compare Two Text FilesHow to Count Words in a DocumentHow to Scan a QR Code from a Screenshot or ImageWhat Is a Hash? MD5, SHA-1 and SHA-256 ExplainedHow to Compress a Photo to 20 KB (or Any Size)How to Remove the Background From a PhotoHow to Test Your MicrophoneHow to Check a Screen for Dead PixelsHow to Record Your ScreenHow to Make a Ringtone for iPhoneHow to Compress a Video to Send ItHow to Remove a Password From a PDFHow to Password Protect a PDFHow to Fill In a PDF FormHow to Convert a PDF to WordHow to Blur a Face in a PhotoHow to Calculate Your BMIHow to Calculate a Mortgage PaymentHow to Schedule a Meeting Across Time ZonesWhat Is a Cron Expression?How to Reverse Complement a DNA SequenceHow to Translate DNA to ProteinHow to Convert GenBank to FASTAHow to Find Restriction Sites in a DNA SequenceHow to Align Two DNA or Protein SequencesHow to Design and Check PCR PrimersHow to Calculate Molar MassHow to Balance a Chemical EquationHow to Make a Solution of a Given MolarityHow to Calculate a Dilution (C1V1 = C2V2)How to Calculate pHHow to Calculate DNA Concentration From A260How to Calculate Insert Amount for a LigationHow to Convert RPM to g (RCF)How to Count Cells With a HemocytometerHow to Use a Punnett SquareHow to Make a Budget With the 50/30/20 RuleDebt Snowball vs Debt AvalancheHow Much Do I Need to Retire?How to Convert Salary to Hourly PayProfit Margin vs MarkupHow to Calculate VAT and Sales TaxHow to Make an InvoiceHow Much House Can I Afford?How to Read Resistor Color CodesHow to Choose a Resistor for an LEDHow to Calculate Voltage Drop in a CableHow Much Concrete Do I Need?How Much Paint Do I Need?How to Calculate a SubnetSignificant Figures RulesHow Loan Amortization WorksROI vs CAGR: How to Measure an Investment's ReturnHow Inflation Shrinks Your SavingsHow to Calculate Your GPAHow to Calculate a TipMinesweeper Strategy: Patterns and TipsSudoku Strategies for BeginnersHow to Win at 2048Solitaire Strategy: How to Win More GamesHow to Type FasterRegex Basics: A Beginner's Guide With ExamplesWhat Is Base64 (and URL Encoding)?How to Calculate Half-LifeThe Ideal Gas Law ExplainedHow a Voltage Divider Works555 Timer CalculationsHow to Calculate Roof PitchHow to Calculate Board FeetDNA and Protein Sequence Statistics Explained