Heads up!
This section of the website will work extremely poorly on mobile devices! There is no ETA on mobile support as for now (probably it will never be implemented).
What is dat?
Please note that this project is currently in an extremely raw state and requires significant improvements to become truly useful. Additionally, it may not work as well on smaller screens for now. That said, I'm excited to introduce you to the color tester – a tool designed to help you test different color combinations on webpages with text, images, elements, and more. While it may not be perfect yet, I'm committed to making it better over time by incorporating your feature requests and feedback. So if you're passionate about web development and design like me, please feel free to share your thoughts!
Quickly generate some color themes to try it out!
Monochromatic
Dichromatic
Select the colors.
Fancy color pickers will come later on. Click here if you are not sure what you are doing.
Background color: background color that will be used.
Headings color: color that will he used for headings.
Primary text color: color that will be used for the body text.
Secondary text color: color that will be used for smaller text (captions, attributions & footnotes)
Border color: color that will be used for borders (e.g. horizontal rulings & quotes)
Accent color: This color will be used to highlight interactive elements on hover and to highlight stuff.
Let's begin with taking a look at all of this together.
This specific example illustrates how all these colors would appear together on a page resembling an article.
What makes copyleft important?
Authored by @rferee on 25th of April, 2023.
What is copyleft?
Copyleft is a type of copyright license that allows people to freely use, modify and distribute creative works such as software, music, art or literature. It was first introduced by Richard Stallman in the 1980s as part of the GNU Project aimed at developing free software alternatives to proprietary programs. The idea behind copyleft is to ensure that knowledge and culture are accessible to everyone without restrictions. The concept of copyleft emerged in response to the traditional copyright laws which were often seen as restrictive and limiting for creators who wanted their work to be shared with others. By contrast, copyleft seeks to provide an alternative approach towards intellectual property rights by emphasizing collaboration over competition. One of the key features of copyleft licenses is that they require any derivative work based on an original creation must also be licensed under the same terms. This means that anyone can modify and redistribute a copylefted work, but they must give credit to the original author and allow others to do the same with their own modifications. As such, it creates a collaborative community where people can share knowledge and build upon each other's ideas.
Just a random picture from my AI images collection, licensed under CC BY-SA 4.0.
How does it work?
Copyleft works by using legal tools such as licenses which define how a particular work can be used or distributed. There are several types of copyleft licenses including GPL (General Public License), LGPL (Lesser General Public License) or CC BY-SA (Creative Commons Attribution-ShareAlike). Each license has its own set of rules regarding distribution, modification or attribution requirements. For instance, GPL requires anyone who distributes a GPL-licensed program must make available its source code along with any modifications made; otherwise they would violate the terms of this license. This ensures that users have access not only to final products but also how these products were created so that they can improve them further if desired. Similarly, CC BY-SA allows people to use, share and remix creative works as long as they give credit to the original author and release their own work under the same license. This ensures that knowledge and culture remain freely available for future generations.
Why choose Copyleft?
There are many reasons why creators choose copyleft over traditional copyright laws. Firstly, it promotes innovation by allowing people to access and improve existing works without legal barriers. By sharing knowledge freely, copyleft encourages users to build upon each other's ideas which can lead to new breakthroughs in various fields. Secondly, it ensures that cultural heritage remains available for future generations instead of beinglocked away behind restrictive copyright laws. Copyleft enables creators to share their work with others and build a community of collaboration and mutual respect. Thirdly, copyleft can also benefit businesses by providing access to high-quality software or other creative works that would otherwise be too expensive or difficult to obtain. By using copyleft licenses, companies can reduce costs while still obtaining valuable resources for their projects. Finally, many people choose copyleft because it aligns with their personal values of freedom, sharing and equality. Copyleft is seen as an ethical approach towards intellectual property rights which prioritizes the common good over individual gain.
Share this article.
More by this author.
By @rferee. Text licensed under CC BY-SA 4.0. Source code is licensed under GNU AGPLv3.0.
Here are the charts:
This section provides various color gradations, assisting you in assessing how different hues appear at distinct opacity levels. Additionally, this may help you discover more suitable colors for your project.
Opacity
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Background on black.
Background on white.
Text on background.
Secondary text on background.
Opacity
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
Accent on background.
Accent on main text.
Accent on secondary text.
And now, let's take a look at the elements, starting with headings.
This section focuses on showcasing how different headings using your chosen colors interact with various fonts. Hover over a heading to view it in your accent color.
DIN 2014 - Regular.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
DIN 2014 - Bold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
DIN 2014 - Extrabold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
DIN 2014 - Black.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Proxima Nova - Regular.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Proxima Nova - Bold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Proxima Nova - Extrabold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Headings, Proxima Nova - Black.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Yorkten Slab - Regular.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Yorkten Slab - Bold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Yorkten Slab - Extrabold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Yorkten Slab - Black.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Headings, Adelle - Regular.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Headings, Adelle - Bold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Headings, Adelle - Extrabold.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
Headings, Adelle - Black.
Level 1 Heading.
Level 2 Heading.
Level 3 Heading.
Level 4 Heading.
How do your colors look when it comes to body text?
The readability of body text is crucial for every website. This portion ensures that your text remains legible. Hover over the text to see it with wider tracking.
Body text, DIN 2014 - Thin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, DIN 2014 - Light.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, DIN 2014 - Regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, Proxima Nova - Thin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, Proxima Nova - Light.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, Proxima Nova - Regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, Adelle - Thin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, Adelle - Light.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Body text, Adelle - Regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
And how about smaller text? Like captions or something.
As before, hover over the text to observe it with increased tracking.
Small text, DIN 2014 - Thin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, DIN 2014 - Light.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, DIN 2014 - Regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, Proxima Nova - Thin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, Proxima Nova - Light.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, Proxima Nova - Regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, Adelle - Thin.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, Adelle - Light.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
Small text, Adelle - Regular.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pulvinar posuere massa eget pulvinar. Integer vitae dui urna. Morbi egestas diam lacus, non sodales magna feugiat fermentum. Sed enim sapien, lacinia at pellentesque eu, bibendum lobortis lorem.
Etiam bibendum vestibulum urna, vel vestibulum felis accumsan quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- John Doe
How about icons?
Icons serve as visual aids for buttons and other elements. Explore how your selected colors perform when paired with icons (by FontAwesome).
Primary text color.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.
Secondary text color.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.
Accent color.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.
White icons.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.
Black icons.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.
Primary text color on accent.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.
Accent color on primary text.
100% opacity.
90% opacity.
80% opacity.
70% opacity.
60% opacity.
50% opacity.
40% opacity.
30% opacity.
20% opacity.
10% opacity.