COLORWASP / How-To
From first color to finished design.
Follow these steps. Everything you create in the workbench is processed on your own device.
Choose a base color
1. Open the generator and select the Harmony tab. 2. Click the base-color square next to the harmony selector to open the color picker. 3. Enter a HEX code, such as #F4C430, if you already have a brand color. Otherwise, choose a hue and adjust the color area and sliders. 4. Watch the five palette colors update as you change the base color. Close the picker to view the complete result. 5. Try a different harmony to see other combinations using your base color. Copy or export any result you want to keep before generating a new palette.
Choose a harmony
1. Start with a base color, then open the Harmony dropdown. 2. Choose Analogous for neighboring hues: a useful starting point for a calm, cohesive design. 3. Choose Complementary for hues on opposite sides of the color wheel when you want more contrast. 4. Choose Triadic for a combination based on three evenly spaced hues. Compare the result in the palette and gradient preview. 5. Click New palette to try a new base color with the selected harmony. This replaces the current palette. 6. You can also start from an example palette below the editor. Filter the examples and click a palette to load it, then adjust individual colors.
Adjust your colors
1. Find the color you want to change among the five palette swatches. 2. Click its HEX value, replace it with a valid code such as #F4C430, then press Enter or click outside the field. 3. For visual editing, click the pencil and use the color picker. Watch the swatch and linked gradient colors update. 4. Repeat for other swatches. Manually adjusted colors form a custom palette; they no longer need to follow a harmony rule. 5. Click the copy icon on a swatch to copy that individual HEX color. To copy all colors in RGB or HSL, use Export and select the format. 6. Save a palette link or export your colors before trying a new design. Check text readability in the actual design where you use the colors.
Extract colors from a photo
1. Open the From a photo tab in the generator. 2. Select a JPG, PNG or WebP image from your device, or drag it onto the upload area. The maximum file size is 20 MB. 3. Wait for processing to finish. ColorWasp creates a palette of five representative colors from the image. 4. Compare the colors with your photo. The extracted palette is a starting point and may not include every small detail in the image. 5. Adjust any HEX value or open a swatch’s color picker to refine the result. Use the colors in the gradient editor if desired. 6. Export the palette or save a share link. The photo is processed on your device and is not included in the shared link.
Build your gradient
1. Generate a palette, choose an example or extract colors from a photo. 2. In the gradient controls, select Linear for a directional transition or Radial for a transition radiating from the center. 3. For a linear gradient, change the angle. For example, 90° runs from left to right. Watch the preview while adjusting it. 4. Drag the color stops along the bar or enter their percentage positions to control where each color appears. 5. Edit a stop’s color, add a stop with the plus button or remove an unwanted stop. A gradient can contain two to eight stops. 6. Check the preview and click Copy CSS. Paste the code into your element’s CSS rule, then check it at the size it will have on your website.
Export your design
1. Finish the palette or gradient you want to use. 2. To export the palette as text, click Export and choose HEX, RGB, HSL or CSS. Review the displayed values. 3. Click Copy to use the text elsewhere, or Download to save it as a file. 4. For a gradient on a website, use Copy CSS in the gradient section. This copies the gradient code rather than the palette’s color list. 5. To save an image, click Image, select Palette or Gradient and choose PNG, WebP or SVG. Check the preview and click Download. The export size is 1200 × 630. 6. You can also copy or share an image where your browser supports it. If image copying or sharing is unavailable, ColorWasp offers a PNG download instead.
Share and keep creating
1. Finish your palette and gradient, then click Share palette at the top of the generator. 2. Copy the link shown in the share window. It contains the palette and gradient settings, including the colors and stop positions. 3. Paste the link into a message or save it as a bookmark. Someone opening it can view the design and continue editing it. 4. The original photo is not included in the link. Share your photo separately if someone needs it. 5. Use the Facebook, WhatsApp, email or other share buttons below the page to share ColorWasp itself. These buttons share the page, not your current design. 6. Keep your palette link or an exported file before leaving. ColorWasp does not store designs in an online account.
