CSS - text featuring a gentle shadow hue and a deeper foreground color

Question

CSS - text featuring a gentle shadow hue and a deeper foreground color

I'm encountering an aesthetic issue where my list of texts have random light/bright colors, making them hard to read on white backgrounds. I've tried setting the text color to shadow, but now I want the text itself to be a darker, more readable color while still maintaining a similar hue to the main light color.

However, adjusting the brightness or using a lower alpha with a black color makes the text appear too greyish for my liking. I am looking for a solution that allows the text to become more saturated as it gets darker, ensuring that the main color remains visible:

https://i.sstatic.net/UKZ5Y.png or https://i.sstatic.net/o8Qv6.png

Is there a CSS blend mode or formula available that can help me achieve one of these desired outcomes?

html css colors

Answer 1

Answer №1

By utilizing the css functions brightness(0.6) and contrast(200%), I was able to successfully achieve the desired effect. While both values can be altered, I recommend adjusting the brightness alone in order to control the darkness of the text. The contrast value already provides a pleasing color to the darkened text.

Answer 2

By utilizing the css functions brightness(0.6) and contrast(200%), I was able to successfully achieve the desired effect. While both values can be altered, I recommend adjusting the brightness alone in order to control the darkness of the text. The contrast value already provides a pleasing color to the darkened text.

Answer 3

Answer №2

I comprehend the requirements you have, however, achieving it efficiently solely with CSS may not be possible. I recommend utilizing Sass .scss along with the following code snippets:

$primary-color: #444;

// define text color function
@function set-text-color($color){
    @if (lightness($color) > 40){
        @retrun #000;
    }
    else{
        @retrun #fff;
    }
}

/* The above function will 
return black if the primary color is light and 
return white if the primary color is dark */

body{
    background: $primary-color;
    color: set-text-color($primary-color);
}

In this snippet, your primary color represents your basic text color. You have the flexibility to customize the function to return a similar color but in a darker or lighter shade based on your design needs.

Answer 4

I comprehend the requirements you have, however, achieving it efficiently solely with CSS may not be possible. I recommend utilizing Sass .scss along with the following code snippets:

$primary-color: #444;

// define text color function
@function set-text-color($color){
    @if (lightness($color) > 40){
        @retrun #000;
    }
    else{
        @retrun #fff;
    }
}

/* The above function will 
return black if the primary color is light and 
return white if the primary color is dark */

body{
    background: $primary-color;
    color: set-text-color($primary-color);
}

In this snippet, your primary color represents your basic text color. You have the flexibility to customize the function to return a similar color but in a darker or lighter shade based on your design needs.

CSS - text featuring a gentle shadow hue and a deeper foreground color

Answer №1

Answer №2

Similar questions

Can the arrangement of icons/buttons on the JW Player control bar be customized?

Reorder the nested list structure

PHP - The form page freezes up every time I try to submit the form

Fixed background & cover design for Internet Explorer 11

Prevent div from moving upward using CSS

What is the most reliable method for displaying an SVG shape in any color across various web browsers?

Implementing Angular2 with conditional loading

Tips for effectively interpreting a json string

Tips for making rounded corners with CSS styling

Automatically conceal a div once an iframe reaches a specific height

Creating text with stripes using CSS

Ways to properly link a header according to industry standards

WordPress Header Display Issue on Mobile and Tablet Devices: What You Need to Know

Having difficulty retrieving an angular file from a location outside of the asset folder

Two sidebar panels displayed in the same tab on the Navbar page

Steps for Loading HTML5 Video Element in Ionic 2

What is the maximum allowable size for scripts with the type text/json?

Arrange the elements in an HTML table with the first and last columns on the left and right sides

Tips for integrating properties into the class in jQuery

Error: Bootstrap/CSS not functioning properly on IE and ED browsers