What is the difference between a tint and a shade?

A tint is created by mixing a color with white, making it lighter. A shade is created by mixing a color with black, making it darker. For example, pink is a tint of red (red + white), while maroon is a shade of red (red + black). Tints increase lightness while preserving hue; shades decrease lightness toward black.

How are tints and shades calculated?

Tints are calculated by linearly interpolating each RGB channel toward 255 (white): channel + (255 - channel) × factor, where factor is 0–1. Shades are calculated by scaling each channel toward 0 (black): channel × (1 - factor). A factor of 0 gives the original color and a factor of 1 gives pure white (tint) or pure black (shade).

How many tint and shade steps should I use for a design system?

Most design systems use 9–11 steps per color (e.g., 100–900 or 50–950 scales like Tailwind CSS or Material Design). 10 steps is a common choice that gives enough granularity for UI states (hover, active, disabled) without overwhelming the palette. Fewer steps (5) work well for simpler branding guides, while more steps (20) suit fine-grained data visualization.

What is the difference between tints/shades and HSL lightness adjustment?

Tints and shades mix with white or black in the RGB color model, which can shift perceived saturation. HSL lightness adjustment changes the L channel while keeping hue and saturation constant, which can make colors appear more artificially uniform. For design systems, mixing with white/black (tints/shades) often produces more natural-looking palettes, while HSL adjustment gives more predictable mathematical consistency.

ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಷೇಡ್‌ಗಳು ಜನರೇಟರ್

ಮಾನ್ಯ

ಹಂತಗಳು:10

21 ಬಣ್ಣಗಳು

Tint 100%#ffffffrgb(255, 255, 255)

Tint 90%#ebf3fergb(235, 243, 254)

Tint 80%#d8e6fdrgb(216, 230, 253)

Tint 70%#c4dafcrgb(196, 218, 252)

Tint 60%#b1cdfbrgb(177, 205, 251)

Tint 50%#9dc1fbrgb(157, 193, 251)

Tint 40%#89b4fargb(137, 180, 250)

Tint 30%#76a8f9rgb(118, 168, 249)

Tint 20%#629bf8rgb(98, 155, 248)

Tint 10%#4f8ff7rgb(79, 143, 247)

Base#3b82f6rgb(59, 130, 246)

Shade 10%#3575ddrgb(53, 117, 221)

Shade 20%#2f68c5rgb(47, 104, 197)

Shade 30%#295bacrgb(41, 91, 172)

Shade 40%#234e94rgb(35, 78, 148)

Shade 50%#1e417brgb(30, 65, 123)

Shade 60%#183462rgb(24, 52, 98)

Shade 70%#12274argb(18, 39, 74)

Shade 80%#0c1a31rgb(12, 26, 49)

Shade 90%#060d19rgb(6, 13, 25)

Shade 100%#000000rgb(0, 0, 0)

ತಾಂತ್ರಿಕ ವಿವರಗಳು

ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಶೇಡ್‌ಗಳ ಜನರೇಟರ್ ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ಈ ಸಾಧನ ಏನು ಮಾಡುತ್ತದೆ

ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಶೇಡ್‌ಗಳ ಜನರೇಟರ್ ಯಾವುದೇ ಮೂಲ ಬಣ್ಣದಿಂದ ಹಗುರವಾದ ಟಿಂಟ್‌ಗಳು (ಬಿಳಿಯೊಂದಿಗೆ ಮಿಶ್ರಣ) ಮತ್ತು ಗಾಢವಾದ ಶೇಡ್‌ಗಳು (ಕಪ್ಪಿನೊಂದಿಗೆ ಮಿಶ್ರಣ) ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಒಂದು ಬಣ್ಣವನ್ನು ನಮೂದಿಸಿ ಮತ್ತು ವ್ಯತ್ಯಾಸಗಳ ಸ್ಮೂತ್ ಗ್ರೇಡಿಯಂಟ್ ಅನ್ನು ರಚಿಸಲು ಹಂತಗಳ ಸಂಖ್ಯೆಯನ್ನು ಆಯ್ಕೆ ಮಾಡಿ. ಪ್ರತಿಯೊಂದು ಹಂತವು HEX, RGB ಮೌಲ್ಯಗಳು ಮತ್ತು ಮಿಶ್ರಣ ಶೇಕಡಾವಾರನ್ನು ತೋರಿಸುತ್ತದೆ, ಇದರಿಂದ UI ವಿನ್ಯಾಸ, ಬ್ರ್ಯಾಂಡಿಂಗ್, ಮತ್ತು ಡೇಟಾ ದೃಶ್ಯೀಕರಣಕ್ಕಾಗಿ ಸತತ ಬಣ್ಣ ಸ್ಕೇಲ್‌ಗಳನ್ನು ನಿರ್ಮಿಸುವುದು ಸುಲಭವಾಗುತ್ತದೆ.

ಡೆವಲಪರ್‌ಗಳ ಸಾಮಾನ್ಯ ಬಳಕೆ ಪ್ರಕರಣಗಳು

ಡೆವಲಪರ್‌ಗಳು ವಿನ್ಯಾಸ ಟೋಕನ್ ಸ್ಕೇಲ್‌ಗಳನ್ನು (ಉದಾ., blue-100 ರಿಂದ blue-900), ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳಿಗೆ hover ಮತ್ತು active ಸ್ಥಿತಿಗಳನ್ನು, ಪ್ರವೇಶಾರ್ಹ ಬಣ್ಣ ಕ್ರಮವ್ಯವಸ್ಥೆಗಳನ್ನು, ಮತ್ತು ಲೈಟ್ ಹಾಗೂ ಡಾರ್ಕ್ ಥೀಮ್‌ಗಳಿಗೆ ಸತತ ಹಿನ್ನೆಲೆ ಮತ್ತು ಸರ್ಫೇಸ್ ಬಣ್ಣಗಳನ್ನು ನಿರ್ಮಿಸುವಾಗ ಟಿಂಟ್ ಮತ್ತು ಶೇಡ್ ಜನರೇಟರ್‌ಗಳನ್ನು ಬಳಸುತ್ತಾರೆ. Tailwind CSS ಕಸ್ಟಮ್ ಬಣ್ಣ ಪ್ಯಾಲೆಟ್‌ಗಳು ಅಥವಾ Material Design ಬಣ್ಣ ವ್ಯವಸ್ಥೆಗಳನ್ನು ನಿರ್ಮಿಸಲು ಈ ಸಾಧನ ಅತ್ಯಾವಶ್ಯಕ.

ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಶೇಡ್‌ಗಳು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತವೆ

ಟಿಂಟ್ ಅನ್ನು ಒಂದು ಬಣ್ಣವನ್ನು ಬಿಳಿಯೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡುವ ಮೂಲಕ ರಚಿಸಲಾಗುತ್ತದೆ, ಇದರಿಂದ ಅದರ ಬೆಳಕುತನ ಹೆಚ್ಚುತ್ತದೆ. ಶೇಡ್ ಅನ್ನು ಕಪ್ಪಿನೊಂದಿಗೆ ಮಿಶ್ರಣ ಮಾಡುವ ಮೂಲಕ ರಚಿಸಲಾಗುತ್ತದೆ, ಇದರಿಂದ ಬೆಳಕುತನ ಕಡಿಮೆಯಾಗುತ್ತದೆ. ಟಿಂಟ್‌ಗಳ ಸೂತ್ರ: new = base + (255 - base) × factor. ಶೇಡ್‌ಗಳಿಗೆ: new = base × (1 - factor). ಹಂತಗಳನ್ನು ಮೂಲ ಬಣ್ಣ ಮತ್ತು ಶುದ್ಧ ಬಿಳಿ (ಟಿಂಟ್‌ಗಳು) ಅಥವಾ ಶುದ್ಧ ಕಪ್ಪು (ಶೇಡ್‌ಗಳು) ನಡುವಲ್ಲಿ ಸಮವಾಗಿ ಹಂಚಲಾಗುತ್ತದೆ, ಇದರಿಂದ ಬಣ್ಣ ಮೌಲ್ಯಗಳ ರೇಖೀಯ ಗ್ರೇಡಿಯಂಟ್ ಉತ್ಪತ್ತಿಯಾಗುತ್ತದೆ.

ಸಾಮಾನ್ಯ ತಪ್ಪುಗಳು ಮತ್ತು ಎಡ್ಜ್ ಕೇಸ್‌ಗಳು

ಬಿಳಿ ಅಥವಾ ಕಪ್ಪಿನೊಂದಿಗೆ ರೇಖೀಯ ಮಿಶ್ರಣವು ಕೆಲವು ಹ್ಯೂಗಳಿಗೆ ಮಂಕಾದ ಟಿಂಟ್‌ಗಳು ಅಥವಾ ಕೆಸರುಮಯ ಶೇಡ್‌ಗಳನ್ನು ಉಂಟುಮಾಡಬಹುದು. ಹಳದಿಗಳು ಗಾಢಗೊಳಿಸಿದಾಗ ಹಸಿರಿನಂತೆ ಕಾಣಬಹುದು, ಮತ್ತು ನೀಲಿಗಳು ಹಗುರಗೊಳಿಸಿದಾಗ ಜೀವಂತಿಕೆಯನ್ನು ಕಳೆದುಕೊಳ್ಳಬಹುದು. ಗ್ರಹಿಕೆಯಾಗಿ ಸಮರೂಪವಾದ ಸ್ಕೇಲ್‌ಗಳಿಗಾಗಿ OKLCH ಅಥವಾ CIELAB ಬಣ್ಣ ಸ್ಥಳಗಳನ್ನು ಬಳಸುವುದನ್ನು ಪರಿಗಣಿಸಿ. ನಿಮ್ಮ ಅತಿಹಗುರ ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಅತಿಗಾಢ ಶೇಡ್‌ಗಳು ಅವುಗಳ ಉದ್ದೇಶಿತ ಹಿನ್ನೆಲೆಗಳ ವಿರುದ್ಧ ಸಾಕಷ್ಟು ಕಾಂಟ್ರಾಸ್ಟ್ ಅನ್ನು ಕಾಯ್ದುಕೊಳ್ಳುತ್ತವೆ ಎಂಬುದನ್ನು ಯಾವಾಗಲೂ ಪರಿಶೀಲಿಸಿ.

ಕೋಡ್‌ಗಿಂತ ಈ ಸಾಧನವನ್ನು ಯಾವಾಗ ಬಳಸಬೇಕು

ವಿನ್ಯಾಸ ಕೆಲಸದ ವೇಳೆ ತ್ವರಿತ ಅನ್ವೇಷಣೆ ಮತ್ತು ಬಣ್ಣ ಸ್ಕೇಲ್‌ಗಳನ್ನು ರಚಿಸಲು ಈ ಬ್ರೌಸರ್ ಸಾಧನವನ್ನು ಬಳಸಿ. ಉತ್ಪಾದನಾ ವಿನ್ಯಾಸ ವ್ಯವಸ್ಥೆಗಳಿಗೆ, ಗ್ರಹಿಕೆಯಾಗಿ ಸಮರೂಪವಾದ ಬಣ್ಣ ಸ್ಥಳಗಳನ್ನು ಬೆಂಬಲಿಸುವ ಮತ್ತು ಯಾವುದೇ ಫಾರ್ಮ್ಯಾಟ್‌ನಲ್ಲಿ ವಿನ್ಯಾಸ ಟೋಕನ್‌ಗಳನ್ನು ಔಟ್‌ಪುಟ್ ಮಾಡಬಹುದಾದ chroma.js ಅಥವಾ culori ಮುಂತಾದ ಬಣ್ಣ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸಿ ಪ್ರೋಗ್ರಾಮ್ಯಾಟಿಕ್ ಆಗಿ ಟಿಂಟ್‌ಗಳು ಮತ್ತು ಶೇಡ್‌ಗಳನ್ನು ರಚಿಸಿ.