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:

or

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

The art of CSS Absolute Positioning and the Science of Body Sc

When I hover over my divs, my span is positioned behind them

Tips on how to horizontally align an icon and text using Material UI

Populate a table cell with a div element in HTML

Combining various arbitrary values, like :has in Tailwind, can be achieved by following these steps

Difficulty arises in designing a tableless layout due to the issue of auto

Ways to style text using variables in SASS without using quotation marks

Using Jquery to enhance navigation tabs with pointers

The erratic appearance of inactive elements within ExtJS components

Change the css code to override the color of the background material

The jQuery bxSlider is failing to function properly in a responsive design

Encountering an issue: Integrating JSON data into HTML using Angular.JS!

What is the best way to align a div of variable size in a container of variable size using CSS?

Using HTML to create interactive table cells

Tips for Choosing Certain List Items in a Responsive Bootstrap Navigation Menu for WordPress

Tips for implementing validation in JavaScript

Today, I am experimenting with HTML5 File Upload using Capybara and Selenium Webdriver in Ruby

Spinning an SVG circle using a group element

Ensure the header remains fixed when scrolling in an HTML page with Bootstrap

What is the best way to alter the header in Django when a user is authenticated?