DHIVA LABS · LEARN

Appearance

Design tools ​

The Design Tools category has a Color Picker, a HEX ↔ RGB Converter and a CSS Gradient Generator. Use them to get colour values you can paste into a stylesheet or into code.

Color Picker ​

Choose a colour by eye and copy it in four formats.

  1. Open Color Picker.

  2. Drag inside the colour area to set how light and how strong the colour is, and drag the slider below it to change the hue. You can also type a hex code in the field under the picker.

  3. Select the copy icon next to the format you need.

RowExample
HEX#3D5AFE
RGBrgb(61, 90, 254)
HSLhsl(231, 99%, 62%)
FlutterColor(0xFF3D5AFE)

The picker works with solid colours. It has no transparency (alpha) control.

HEX ↔ RGB Converter ​

Converts a hex colour code to red, green and blue numbers, and back. Both directions update as you type.

  1. Open HEX ↔ RGB Converter.

  2. To convert from hex, type the code in HEX. The # is already there. Three-digit codes work too: F80 is read as FF8800.

  3. To convert from RGB, type numbers from 0 to 255 in R, G and B.

  4. Check the colour in the preview block, then select one of the two buttons under it to copy the value as #RRGGBB or as rgb(r, g, b).

If a value cannot be read, the preview disappears and a message tells you why: Enter a 3 or 6 digit hex color, or R, G and B must be 0–255.

CSS Gradient Generator ​

Builds a CSS background gradient from two to six colours, with a live preview.

  1. Open CSS Gradient Generator. It starts with a two-colour gradient.

  2. Select a colour chip to change that colour. In the Pick a color dialog, choose the colour and select Select.

  3. Select Add stop to add another colour, up to six. To remove one, select the cross on its chip. A gradient always keeps at least two colours.

  4. For a straight gradient, drag Angle. It moves in steps of 5°. 0° runs from bottom to top and 90° from left to right.

    For a circular gradient, turn on Radial gradient. The angle slider is hidden because a radial gradient has no direction.

  5. Copy the line under CSS and paste it into your stylesheet.

The output looks like this:

css
background: linear-gradient(90deg, #3d5afe 0%, #ff4081 100%);

With Radial gradient on, it becomes:

css
background: radial-gradient(circle, #3d5afe 0%, #ff4081 100%);

The colours are spread evenly. With three colours the stops are at 0%, 50% and 100%. To place a stop somewhere else, edit the percentage after you paste the CSS.

Next steps ​