Generate a solid CSS background-color declaration from RGB or HSL values, or paste an existing CSS color to inspect its normalized HEX, RGB, and HSL forms.
Last updated: August 2026 | By Workshelve Team
Generated CSS and normalized color values will appear here.
The CSS background-color property paints a single solid color behind an element's content and padding. It is the right property for cards, buttons, panels, page backgrounds, and fallback colors behind images.
This generator focuses on solid colors. It accepts numeric RGB channels, HSL values, and alpha opacity, then returns a paste-ready declaration plus equivalent HEX, RGB, and HSL notations for design handoff.
Use the CSS to Values mode when you inherit a color from a stylesheet and need to understand its channels. The parser normalizes HEX shorthand, RGB percentages, alpha values, and modern HSL slash-alpha syntax.
Build a dark translucent panel background from RGB(15, 23, 42) with alpha 0.92:
Alpha 0.92 leaves a small amount of underlying page color visible, which can soften dark panels while keeping text contrast close to the opaque color.
No. background-color sets only the solid color layer. The shorthand background property can also reset images, repeat behavior, size, position, and other background settings.
No. Gradients are images in CSS and belong in background or background-image. This tool is intentionally limited to solid background colors.
Yes. CSS rgb() channels can be numeric values, including decimals. This tool accepts values from 0 to 255 and preserves useful decimal precision; six-digit HEX is necessarily rounded to 8-bit channel values.
Negative RGB, saturation, lightness, and alpha values are invalid. Negative HSL hue is accepted because CSS angles can wrap around the color wheel.
Six-digit HEX cannot represent transparency. The main declaration uses rgba() when alpha is below 1, while the HEX line still shows the opaque base color.
No. It parses numeric HEX, RGB(A), and HSL(A) values so the output can show exact channel math without browser color-name lookup.
Yes. Paste background-color: #0f172a; or just #0f172a. The parser extracts the color value and normalizes it.
Yes. Semi-transparent backgrounds blend with whatever sits behind them, so final contrast depends on the actual page underneath.
Related Tools
Build and preview common CSS Grid layout patterns.
Build linear and radial gradients with custom color stops.
Remove, replace, and export image metadata.
Generate gradient and image background-image CSS.
Generate uniform or side-specific CSS border declarations.
Generate uniform, corner, and elliptical border-radius CSS.