BlueprintLab Tools
JAEN
TOOL TOPIC

Color & CSS design

Browser tools for color conversion, palettes, WCAG contrast, gradients, shadows, radius, filters and other CSS visual design tasks.

18tools
Freeno sign-up
JA / ENlanguages

Common tasks in this topic

Tools for converting RGB, HEX, and HSL values and picking colors from images for web and design work.

1
Convert RGB values to HEX or HSL
2
Convert HEX or HSL values back to RGB
3
Pick HEX and RGB colors from an image

Tools in this topic

Choose the tool that most closely matches the task you need to finish.

RGB to HSL converterConvert RGB values (0–255) to HSL hue, saturation and lightness.Open  →HSL to RGB converterConvert HSL hue, saturation and lightness into RGB values (0–255).Open  →RGB to HEX converterConvert RGB values (0–255) into a #RRGGBB hexadecimal color code.Open  →HEX to RGB converterConvert #RGB or #RRGGBB hexadecimal colors into RGB values.Open  →HEX / RGB / HSL converterConvert HEX or RGB colors to HEX, RGB and HSL.Open  →Pick HEX and RGB Colors from an ImageClick a point in an image to sample its HEX and RGB color.Open  →Color palette generatorGenerate a 9-step tint/shade palette from one color and copy CSS variables.Open  →Color harmony generatorGenerate complementary, analogous, triadic, and tetradic harmonies from a base color.Open  →WCAG contrast checkerCheck foreground/background contrast ratio against WCAG AA and AAA thresholds.Open  →CSS gradient generatorBuild linear, radial, or conic gradients with live preview and copy-ready CSS.Open  →CSS box-shadow generatorTune offset, blur, spread, color, and inset to generate box-shadow CSS.Open  →CSS text-shadow generatorPreview and generate CSS text-shadow values.Open  →CSS border-radius generatorAdjust four corner radii together or separately and generate CSS.Open  →Glassmorphism CSS generatorGenerate glassmorphism CSS by tuning transparency, blur, border, and radius.Open  →Color mixerMix two colors at a chosen ratio and get HEX/RGB output.Open  →HEX8 / RGBA alpha converterConvert between #RRGGBBAA and RGBA alpha color formats.Open  →CSS filter generatorPreview brightness, contrast, saturation, blur and more to generate CSS filter.Open  →CSS transform generatorCombine translate, rotate, scale and skew with live CSS transform preview.Open  →

Related guides

Use these when you need the decision context around the tools.

HEX, RGB, HSL and contrast ratios: different jobsReview decisions, failure points and workflow context.Read →JPEG, PNG, WebP or AVIF? Pick by where the image is going.Review decisions, failure points and workflow context.Read →

Browse by use case

Start from the job and follow the tools used in that workflow.

Image & content workChoose related tools from a practical workflow.Open →Web developmentChoose related tools from a practical workflow.Open →

Related references

Keep the relevant formats and units close while you work.

Image formatsOpen the related reference guideOpen  →