Everything you use to pick, reuse and plan colors in Bitgrain: the Studio color picker, kit swatches, mixed-color text, gradient text, and the Color studio for pulling a palette, harmonies and a brand board out of a photo.
Every color field in the Studio (text color, shape fill and stroke, vector fill, pattern colors, page and frame backgrounds) opens the same picker. The field itself shows a swatch and the color's hex code without the #. If the color is partly transparent, the opacity percentage is shown next to it. If the color is bound to a design kit, the field shows the kit color's name with a small dot instead.
Click the field to open the picker. From top to bottom it contains:
| Part | What it does |
|---|---|
| Saturation and brightness square | Drag horizontally for saturation and vertically for brightness. |
| Hue slider | Picks the hue, from red through the spectrum and back to red. |
| Opacity slider | Sets transparency, shown over a checkerboard so you can see it. |
| Hex field | Type or paste a hex code. Both 6-digit (#820000) and 8-digit codes with opacity (#82000080) work, with or without the #. |
| Opacity field | Type an exact opacity from 0 to 100 percent. |
| Pick color | An eyedropper that samples any pixel on your screen, including outside the browser window. Only shown in browsers that support it (current Chrome and Edge). |
| Kit swatches | The colors of your active design kit, under the kit's name. Clicking one binds the color to the kit where the field supports binding. |
| Preset swatches | A fixed row of basic colors: black, white, a handful of brights, and Bitgrain's ink and paper tones. |
The currently used swatch in either row gets a highlighted border, so you can see if a layer already uses a kit or preset color.
Changes apply live as you drag, so you can watch the canvas while you pick. Close the picker by clicking anywhere outside it.
Tip: Picking a preset swatch keeps your current opacity. If you have set a color to 50% and click a preset, the preset comes in at 50% too.
When a field is bound to a kit color, picking anything that isn't a kit swatch unbinds it. That includes dragging in the square, typing a hex code, the eyedropper and the preset row. See binding a color to layers.
A text layer with a single color shows one color field. If different parts of the text have different colors (for example one word picked out in red), the fill section lists one field per color used instead:
See text and typography for styling parts of a text layer.
Text layers have a Gradient toggle under the fill. Turn it on to fill the text with a two-color gradient, then set both colors and the angle in degrees (0 to 360). New gradients start from orange #f97316 to deep red #820000 at 135 degrees. Gradient colors and angle can be animated.
Shapes have separate fill and stroke colors, both bindable to kit colors.
A vector's fill has three modes: None, Color and Image. Image fills the shape with a picture, using Cover, Contain or Stretch to fit it. The stroke has its own color field.
Each page and frame has a background color, which can also be bound to a kit color. See pages and frames.
With nothing selected, the right panel shows a Workspace background color and a Pattern choice of Dots, Grid or None. This sets the color of the workspace around your pages, not the pages themselves. It is a personal preference saved in your browser, it never appears in exports, and Reset to theme puts it back to the default for light or dark mode.
The Color studio lives in the image editor, not the Studio, because it works from a photo. Open an image in the editor and click the palette icon labelled Color studio in the canvas toolbar. It is disabled until an image is loaded.
The left side of the window reads the colors of your image and shows them as swatches.
4, 6, 8 or 12. The default is 8.Under the swatches, a color wheel places every extracted color by hue (the angle around the ring) and saturation (the distance across the ring). The base color is drawn larger. It shows at a glance whether your photo is mostly warm, mostly cool, or spread around the wheel.
The Harmonies tab builds classic color schemes from the base color:
| Harmony | What it gives you |
|---|---|
| Complementary | The base plus the color opposite it on the wheel. High contrast. |
| Analogous | The base with its neighbours 30 degrees either side. Calm and cohesive. |
| Triadic | Three colors 120 degrees apart. |
| Split complementary | The base plus the two colors either side of its opposite (150 and 210 degrees away). Contrast with less tension. |
| Tetradic | Four colors 90 degrees apart, two complementary pairs. |
| Tints & shades | A 9-step ramp from light to dark of the base color. |
Click any chip or ramp step to copy its hex code.
The Brand board tab turns the extracted palette into a small set of roles:
| Role | How it's chosen |
|---|---|
| Background | The lightest color |
| Surface | The second lightest color |
| Text | The darkest color |
| Primary | The most saturated color |
| Accent | The next most saturated color |
A sample card shows the roles in use (a headline, body text and a button) so you can judge the palette before committing to it. Below the card, Text on background shows the contrast ratio between the text and background roles with a rating:
| Rating | Contrast ratio |
|---|---|
| AAA | 7:1 or more |
| AA | 4.5:1 or more |
| AA large | 3:1 or more (fine for big headlines, not body text) |
| Fail | below 3:1 |
Two buttons copy the result:
:root block with --brand-bg, --brand-surface, --brand-text, --brand-primary and --brand-accent.The Color studio and design kits work well together:
The color picker changes layer colors. To change the colors inside a photo, use the image effects instead: duotone and palette mapping in the image editor, or filters and color effects on an image layer in the Studio.