Allow to change swatches for Sketch component #177

sjoerd222888 · 2025-05-05T13:20:08Z

I would like to be able to change the color swatches shown in the Sketch components. But as far as I can see there is not property to achieve this.

Working with brand colors I would like the user to freely select colors but at the same time also having brand colors available as swatches. The sketch component looks excellent for that case, but it seem I am not able to change the swatch color.

Any advise? Would this be a feature request?

jaywcjlove · 2025-05-05T17:48:31Z

@sjoerd222888 Yes, you can customize the color swatches in the Sketch component by using the presetColors prop. Just pass an array of color values to presetColors, and they will appear as the swatches.

react-color/packages/color-sketch/src/index.tsx

Line 68 in 22b3566

presetColors = PRESET_COLORS,

react-color/packages/color-sketch/src/index.tsx

Line 192 in 22b3566

colors={presetColors}

react-color/packages/color-sketch/src/index.tsx

Lines 19 to 35 in 22b3566

    
           const PRESET_COLORS = [ 
        
             '#D0021B', 
        
             '#F5A623', 
        
             '#f8e61b', 
        
             '#8B572A', 
        
             '#7ED321', 
        
             '#417505', 
        
             '#BD10E0', 
        
             '#9013FE', 
        
             '#4A90E2', 
        
             '#50E3C2', 
        
             '#B8E986', 
        
             '#000000', 
        
             '#4A4A4A', 
        
             '#9B9B9B', 
        
             '#FFFFFF', 
        
           ];

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow to change swatches for Sketch component #177

Allow to change swatches for Sketch component #177

Allow to change swatches for Sketch component #177

Allow to change swatches for Sketch component #177

Comments