Beta
Enjoy BaggerUI?Give it a star on GitHub

Color Pickers

  • 1

    To be able to use the components on this page, you must have the existing color-picker component in your project. We recommend adding it tocomponents/ui/color-picker.tsx

  • 2

    Make sure to adjust any necessary imports and styles to fit your setup, preference and needs.

Examples

  • Default

Combos

  • With Presets

    Presets

  • With History

  • Advanced Picker

  • Form based

    Select the primary color for your brand.

    Select the secondary color for your brand.

    Presets

    Select an accent color for highlights and calls to action.

  • Color Mixer

    Color Mixer
    Select a base color and mix it with white or black
    Base Color
    Mix with White: 0%
    Current Hex Value
    #6366f1
    Mix with Black: 0%
    Current Hex Value
    #6366f1

  • Color Bundle Editor

    Color Bundle Editor

    Configure color themes and export as JSON for your application.

    Content Theme

    Light Theme

    Dark Theme

    Content Theme

    This is a preview of your Content Theme theme with sample links and text.

    Light Theme

    This is a preview of your Light Theme theme with sample links and text.

    Dark Theme

    This is a preview of your Dark Theme theme with sample links and text.

  • Color Bundle Generator
    Color Bundle Generator
    Generate a complete color bundle from primary and secondary colors
  • Color Bundle AI Generator
    AI Color Bundle Generator
    Generate color bundles using AI based on your description