Skip to main content

    We use cookies

    We use cookies to improve your experience. By continuing to browse, you accept their use.

    Learn more in our Cookies and Privacy

    🎨

    Online Color Tools

    Extract, analyze, convert and share your colors. 12 professional tools 100% free, no signup required.

    Extraction
    Analysis
    Conversion
    Export
    Gradients
    Accessibility
    Effects
    Creative
    Developer
    Preview

    Pick a color

    Sample an exact color from an image and read its HEX, RGB, HSL and HSV values so you can reuse it in your project.

    Extraction

    Extract colors from an image

    Analyze an image to recover its main colors and build a palette with the corresponding color values.

    Extraction

    Generate a palette from an image

    Create a palette from the colors detected in an image and recover the different shades for your project.

    Extraction
    Analysis

    Identify dominant colors

    Find the colors that occupy the largest areas of an image and inspect their values to understand its main palette quickly.

    Extraction
    Analysis

    Find similar colors

    Choose a color and find nearby shades to complete a palette or explore different variations of the same tone.

    Analysis

    Convert a color

    Convert a color between HEX, RGB, HSL, HSV, CMYK, LAB and OKLCH and read the corresponding values immediately.

    Conversion

    Check color contrast

    Compare a text color and a background color to check their contrast ratio against the relevant WCAG criteria.

    Analysis

    Export a palette

    Export your palette in the available formats, such as CSS, SCSS, JSON or ASE, so you can reuse it in your project.

    Export

    Preview a palette

    Apply your palette to different visual elements to check how the colors work together before you use them.

    Analysis

    Download a palette

    Save your palette as an image with its colors and codes so you can keep it, present it or share it.

    Export

    Share a palette

    Generate a link that lets you send your palette and its color values to a colleague, client or another device.

    Export

    Create color harmonies

    Choose a base color and generate complementary, analogous, triadic or tetradic harmonies around it.

    Analysis

    Generate a CSS gradient

    Create a linear, radial or conic gradient, adjust its colors and settings, then copy the corresponding CSS code.

    Gradients
    Developer

    Create a mesh gradient

    Build a multicolor mesh gradient and adjust its different color points until you get the background you want.

    Gradients
    Creative

    Create an animated gradient

    Set the colors, direction and speed of an animated gradient, then copy the CSS needed to reproduce its motion.

    Gradients
    Effects

    Simulate color blindness

    Simulate different color-vision deficiencies to check whether the important parts of your palette remain distinguishable.

    Accessibility
    Analysis

    Test text readability

    Compare a text color with a background color to judge readability under different display conditions.

    Accessibility
    Analysis

    Analyze a palette with WCAG criteria

    Analyze contrast between the colors in your palette and identify combinations that meet WCAG AA or AAA levels.

    Accessibility
    Analysis

    Create a glassmorphism effect

    Adjust transparency, blur and color for a glass effect, then copy the CSS properties needed to use it.

    Effects
    Developer

    Create a neumorphic effect

    Adjust light and dark shadows, depth and rounded corners to create a neumorphic effect and copy its CSS.

    Effects
    Developer

    Create a colored shadow

    Choose the shadow color, blur, spread and offset, then copy the matching CSS box-shadow property.

    Effects
    Developer

    Apply a duotone effect

    Choose two colors to remap the shadows and highlights of an image, then preview and export the result.

    Creative
    Effects

    Apply a color filter

    Add a color to your image, then adjust the blend mode and opacity until you get the visual result you want.

    Creative
    Effects

    Create a color mood board

    Arrange colors and reference images on one board to build and present a consistent visual direction.

    Creative
    Export

    Mix colors

    Combine several colors, adjust their proportions in the mix and read the resulting shade and its values.

    Creative
    Analysis

    Generate tints and shades

    Start from one base color and generate a scale of lighter and darker variations with their matching codes.

    Creative
    Analysis

    Generate a random palette

    Create a new color palette and optionally choose a harmony type before generating another combination.

    Creative
    Extraction

    Generate a palette from a keyword

    Enter a theme or keyword to get an associated palette and explore the different colors it proposes.

    Creative
    Extraction

    Generate a Tailwind CSS palette

    Choose a base color and create a multi-step Tailwind scale ready to integrate into your configuration.

    Developer
    Export

    Generate CSS variables

    Turn your palette into CSS custom properties with variable names ready to copy into your stylesheet.

    Developer
    Export

    Generate a shadcn/ui theme

    Create the color variables needed for a shadcn/ui theme and preview how they look in light and dark modes.

    Developer
    Export

    Generate SCSS variables

    Turn your palette colors into SCSS or Sass variables ready to copy and reuse throughout your styles.

    Developer
    Export

    Analyze color temperature

    Analyze a color to place its perceived tone between warm, cool and neutral and inspect the values used for that interpretation.

    Analysis

    Explore color associations

    Choose a color to review common associations linked to it and discover possible ways to use it in design.

    Analysis
    Creative

    Browse brand colors

    Search the catalog for a brand to view its recorded colors and quickly copy the available HEX codes.

    Analysis
    Extraction

    Explore color trends

    Browse the available color and palette selections to explore different trends and copy the codes that interest you.

    Creative
    Analysis

    Apply a gradient map

    Remap the dark and light areas of an image with a custom gradient, then preview and export the result.

    Creative
    Effects

    Add a color overlay

    Overlay a color on your image and adjust its opacity and blend mode to change the overall visual mood.

    Creative
    Effects

    Generate a monochromatic palette

    Choose one color and create multiple brightness and saturation variations to build a monochromatic palette.

    Creative
    Analysis

    Generate complementary colors

    Choose a base color and get its opposite on the color wheel together with the variations offered around the result.

    Creative
    Analysis

    Preview a palette in an interface

    Test your palette on buttons, cards, fields and other components to check how it looks in a realistic interface.

    Preview
    Developer

    Preview a palette on social media

    Apply your colors to post and story mockups to check how they look before preparing your final visuals.

    Preview
    Creative

    Professional color tools for designers and developers

    Our color tool suite allows you to extract palettes from your images, convert between formats (HEX, RGB, HSL, CMYK), check WCAG accessibility, and export your colors to CSS, Sass or Tailwind. All tools work directly in your browser, without signup and respecting your privacy.

    Color extraction and analysis from images

    Use our color picker (eyedropper) to precisely identify any color in your photos. Automatically extract dominant colors and generate harmonious palettes from your inspiration images. Perfect for branding, web design and graphic creation.

    Color conversion and accessibility

    Instantly convert your colors between HEX, RGB, HSL and CMYK. Check contrast between your colors according to WCAG AA and AAA standards to ensure accessibility of your designs. Generate color harmonies based on the color wheel: complementary, analogous, triadic and more.

    100% free, no signup, privacy-friendly

    All our color tools are completely free and require no signup. Your images and data are processed locally in your browser and are never sent to our servers. Use our tools with confidence for your personal and professional projects.