# Color Lighten/Darken Adjust color brightness and create variations with lighten/darken controls > Canonical page: https://elysiatools.com/en/tools/color-lighten-darken - **Category:** Design - **Keywords:** color, lighten, darken, brightness, adjust, tint, shade, color adjustment, luminance ## Overview The Color Lighten/Darken tool allows you to precisely adjust the brightness of any color, enabling you to generate consistent tints, shades, and gradients for your design projects. ## Inputs - **Base Color** (color) - **Adjustment Type** (select) - **Adjustment Amount (%)** (range): Adjustment amount for color brightness (-100% to +100%) - **Gradient Steps** (number): Only applies when "Gradient (Full range)" is selected. Controls how many colors to generate in the gradient sequence (2-20 steps) - **Include Complementary Colors** (checkbox) - **Preserve Relative Saturation** (checkbox) ## When to use - Creating a cohesive color palette for UI/UX design by generating lighter and darker variations of a primary brand color. - Generating hover states or active states for buttons and interactive elements by slightly adjusting the base color brightness. - Developing custom color gradients for data visualizations or background elements with specific step counts. ## How it works - Select your base color using the color picker or by entering a hex code. - Choose an adjustment type, such as Lighten, Darken, or Gradient, to define how the color should be modified. - Use the slider to set the adjustment percentage or define the number of steps for a gradient sequence. - Apply optional settings like preserving saturation or including complementary colors to refine the output. ## Use cases - Generating a complete UI color system from a single brand color. - Creating accessible contrast variations for text and background combinations. - Building custom CSS color variables for web development projects. ## Frequently asked questions ### Can I generate multiple shades at once? Yes, by selecting the 'Gradient' adjustment type, you can specify the number of steps to generate a sequence of colors ranging from light to dark. ### What does 'Preserve Relative Saturation' do? This feature ensures that the color's intensity remains consistent relative to its new brightness level, preventing the color from looking washed out or overly grey. ### How do I create a hover effect for a button? Select your button's base color, choose the 'Darken' adjustment type, and set the adjustment amount to approximately 10-15% for a subtle, professional hover state. ### Can I adjust colors by a specific percentage? Yes, the 'Adjustment Amount' slider allows you to fine-tune the brightness change from -100% (black) to +100% (white). ### Is this tool suitable for print design? This tool works in RGB color space, which is ideal for digital and web design. For print, ensure you convert the final hex values to CMYK in your design software. ## Related tools - [Color Complement](https://elysiatools.com/en/tools/color-complement): Find complementary colors and create harmonious color schemes with triadic, tetradic, and analogous color relationships - [Color Hue Shifter](https://elysiatools.com/en/tools/color-hue-shifter): Shift color hues and create variations with clockwise/counterclockwise hue rotation controls - [Color Inverter](https://elysiatools.com/en/tools/color-inverter): Invert colors and create negative versions with RGB, HSL, and brightness inversion methods - [Color Saturate/Desaturate](https://elysiatools.com/en/tools/color-saturate-desaturate): Adjust color saturation and create variations with saturate/desaturate controls - [Color Shade Generator](https://elysiatools.com/en/tools/color-shade): Generate darker variations of a color by adding black, creating rich shades for depth and contrast in design - [Color Tint Generator](https://elysiatools.com/en/tools/color-tint): Generate lighter variations of a color by adding white, creating bright and airy tints for fresh design aesthetics - [Neon Color Generator](https://elysiatools.com/en/tools/neon-colors): Generate vibrant, glowing neon colors with high saturation and brightness, creating eye-catching electric light effects perfect for digital displays and modern design - [Color Analogous](https://elysiatools.com/en/tools/color-analogous): Generate harmonious analogous color schemes with adjacent colors on the color wheel, creating unified and peaceful combinations ## Samples - [Color Code Samples](https://elysiatools.com/en/samples/color-code): Collection of color codes in various formats (Hex, RGB, HSL, named colors) for validation testing - [Android Image Processing Java Samples](https://elysiatools.com/en/samples/android-image-processing-java): Android Java image processing examples including reading/saving images, scaling, and format conversion - [Android Image Processing Kotlin Samples](https://elysiatools.com/en/samples/android-image-processing-kotlin): Android Kotlin image processing examples including reading/saving images, scaling, and format conversion - [Web Image Processing Python Samples](https://elysiatools.com/en/samples/web-image-processing-python): Web Python image processing examples using PIL/Pillow including reading, saving, resizing, and format conversion ## Related content - [Accessible Color System Design Tools](https://elysiatools.com/en/hubs/color-design-tools): Build a reusable color system by transforming colors, generating harmonies, checking contrast and color vision, and documenting tokens. - [Color System and CSS Effect Design Workflow](https://elysiatools.com/en/hubs/design-generate): Extract a palette, build accessible color relationships, generate tokens, and apply CSS effects that stay consistent in real interface states.