CSS Color: Blue

Named CSS color Blue #0000FF in HEX, rgb(0, 0, 255) in RGB, hsl(240, 100%, 50%) in HSL.

BlueBlue

Color Values

FormatValueCSS Usage
NamedBluecolor: Blue;
HEX#0000FFcolor: #0000FF;
RGBrgb(0, 0, 255)color: rgb(0, 0, 255);
HSLhsl(240, 100%, 50%)color: hsl(240, 100%, 50%);

About Blue

Blue is one of the three primary colors in the RGB model and a cornerstone of web design. At hex `#0000FF`, the blue channel is at maximum (255) with red and green both at zero. It sits at 240 degrees on the hue wheel with full saturation and 50% lightness.

In web design, blue is the most trusted and widely used color. Facebook, Twitter, LinkedIn, and countless other platforms use blue as their primary brand color. Blue conveys reliability, professionalism, and calm. It is the default color for hyperlinks in most browsers.

Pure CSS Blue (`#0000FF`) is very intense and can be difficult to work with. For accessibility, it achieves approximately 8.6:1 contrast against white, easily passing WCAG AAA for all text sizes. However, its extreme saturation can cause visual fatigue, so most designs use softer blues like DodgerBlue or SteelBlue for large areas.

Blue's complement is Yellow. It pairs well with white, light gray, orange, and gold. In Tailwind CSS, `blue-700` is close, though the standard blues tend to be slightly lighter and more violet than pure CSS Blue.

FAQ

What is the hex code for Blue?

The CSS named color Blue has the hex code #0000FF. You can use it in CSS as color: #0000FF; or simply color: Blue;.

What is Blue in RGB?

In RGB notation, Blue is rgb(0, 0, 255). Use it in CSS as color: rgb(0, 0, 255);.

What is Blue in HSL?

In HSL notation, Blue is hsl(240, 100%, 50%). Use it in CSS as color: hsl(240, 100%, 50%);.

What color category is Blue?

Blue belongs to the Blue color family in the CSS named colors specification.

Can I use the name "Blue" directly in CSS?

Yes. All modern browsers support CSS named colors. You can write color: Blue; or background-color: Blue; directly in your stylesheet. Named colors are case-insensitive.

Try in Color Converter

Convert Blue to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.

Open Color Converter →