હોમડેવલપર ટૂલકલર પિકર

કલર પિકર

રંગ પસંદ કરો અને HEX, RGB અને HSL ફૉર્મેટ વચ્ચે કન્વર્ટ કરો

HEX (3, 6 or 8 digits), rgb() or hsl().
Quick picks
The first three are the saffron, green and navy blue of the Indian flag.
Selected colour
#2563EB
Text in white reads best on this colour.
  • HEX#2563EB
  • RGBrgb(37, 99, 235)
  • HSLhsl(221, 83%, 53%)
  • HSV / HSB221°, 84%, 92%
  • CMYK84%, 58%, 0%, 8%
  • CSS variable--brand-color: #2563eb;
On white text
5.17 : 1
AA
Sample text
On black text
4.06 : 1
AA large text only
Sample text
Contrast as a text colour, by WCAG: 4.5 : 1 or more passes AA for normal text.
Tints and shadestap to use

સંપૂર્ણપણે તમારા બ્રાઉઝરમાં ચાલે છે. તમે લખો કે અપલોડ કરો તે કંઈ પણ અમને મોકલાતું નથી કે સ્ટોર થતું નથી.

આ પરિણામો સામાન્ય માર્ગદર્શન માટે છે. કોઈ મહત્ત્વની બાબત પર આધાર રાખતાં પહેલાં કૃપા કરીને તપાસી લો. ઉપયોગની શરતો

તેનો અનુવાદ તૈયાર ન થાય ત્યાં સુધી નીચેની માર્ગદર્શિકા અંગ્રેજીમાં છે.

કેવી રીતે વાપરવું

  1. Click the colour box to open your browser's colour picker, use Pick from screen (Chrome and Edge on a computer), or tap one of the quick picks.
  2. Or type a colour you already have: a HEX code such as #ff9933 or #f93, rgb(255, 153, 51) or hsl(30, 100%, 60%).
  3. You'll see the same colour as HEX, RGB, HSL, HSV, CMYK and a CSS variable. Click the copy button next to any value.
  4. Check the contrast boxes to see whether the colour reads well as text on white or black, and tap a tint or shade to try a lighter or darker version.

Colour formats explained

The same colour can be written in several formats, and which one you use depends on your tool or language. This color picker gives you the common ones side by side.

  • HEX (#RRGGBB): the most common format in CSS. Each pair is a hexadecimal value (00–FF) for red, green and blue. Example: #FF5733.
  • RGB (R, G, B): a value from 0 to 255 for each channel. Used in CSS (rgb(255, 87, 51)) and most image editors.
  • HSL (Hue, Saturation, Lightness): the easiest for designers to reason about. Hue is 0–360° around the colour wheel, and saturation and lightness are percentages. Want a lighter shade of the same colour? Raise the lightness.

Colour tips for web design

  • 60-30-10 rule: use your main colour for about 60% of the design, a secondary colour for 30% and an accent for 10%. It keeps a palette balanced.
  • Contrast for accessibility: text needs a contrast ratio of at least 4.5:1 against its background (WCAG AA). Dark text on a light background is the safest choice.
  • Colours with a meaning: people read red as error or danger, green as success, yellow as warning and blue as information. Stick to these.