DEV Community: Krzysztof Krysiński

How do color pickers work? - HSL Panel

Krzysztof Krysiński — Sat, 29 Aug 2020 17:54:42 +0000

Introduction

In this part, I'll explain the theory behind colors and build the HSL Color panel, this is a first color picker I'll cover.

Note: I will not explain the math behind colorspace conversions

What is the color?

English Wikipedia says a Color is the visual perceptual property corresponding in humans to the categories called red, yellow, blue, etc.

In computer science, colors are defined in a lot of different ways, we have color spaces like RGB, CMYK, HSL, YCbCr, and more.

In this part, we will focus on RGB and HSL.

Why there isn't one unified color format?

Because it's impossible! All color spaces have different properties, and they are used for different things.

Let's get an RGB and CMYK for example.

RGB

RGB is a color format that uses the Red Green and Blue channel to represent the color by additive color mixing. That means when you project all three colors, you'll get white.

RGB is mostly used in displays, each pixel is divided into 3 "subpixels" which are R, G, and B channels. Displays are black when turned off*, so RGB is good for the task.

*Well, black is displayed differently on different screen types, OLED does that by turning off individual pixels, but LED can't do that, it imitates black, that's why OLED screens can achieve true blackness

Why Red, green, and blue?

The answer is simple, it's because of how our eye is built and how do we perceive colors. I won't dig into details, you can read more about RGB on very complex and detailed Wikipedia article

CMYK

Cyan, Magenta, Yellow, and Key (Black)

CMYK, on the other hand, uses subtractive color mixing, instead of additive, when you project the Cyan, Magenta, and Yellow it will yield the black color.

You can see that on both images, you can distinct the RGB and CMY.

CMYK color space is used mostly in printing, paper sheets are white, so you don't need any ink for white color, but you need all colors to get black, that's why RGB wouldn't work for printing. CMYK is the reason why you can't sometimes print a black document because of a lack of Magenta ink.

Color range gradient

I bet you saw a gradient like that somewhere

But, how is it made?

Let me introduce you to an HSL format.

Hue, Saturation and Lightness

This is what the name stands for. It's different from RGB and CMYK because each value doesn't describe a "separate color".

Hue - 0-360° - a pure pigment, the main property
Saturation - 0-100% (or 0-1) - a greyness property
Lightness - 0-100% (or 0-1) - a color lightness property, where 0 is black and 100 is white

Hue values:

Cool, but what about that?

This color space is ideal to easily represent data in 2D space. We can associate the X and Y coordinates with H and S values. By doing so, we can achieve the mentioned gradient above.

I prepared a small gist in python to generate it.

from PIL import Image
import colorsys

width = 360
height = 100

image = Image.new("RGB", (width, height))

for y in range(height):
    for x in range(width):
        color = colorsys.hls_to_rgb(x / 359, abs((y/100) - 1), 1)
        image.putpixel((x,y), (int(color[0] * 255), int(color[1] * 255), int(color[2] * 255)))

image.save("ColorPalette.png", "PNG")

Color is calculated based on X and Y coordinates from HSL, converted to RGB, and then displayed on the screen. Isn't that neat?

So whenever the user clicks on some part of this gradient, we can easily get color based on coordinates(X: Hue - 0-360, Y: Saturation - 0-100 and Lightness 100%)

We can create almost any other color picking widget by using the HSL color space.

Conclusion

I described almost all knowledge needed to understand single panel HSL color picker, but there is a lot more to learn about colors, it's a huge topic and worth to dive in.

Stay tuned!

How do color pickers work?

Krzysztof Krysiński — Sat, 29 Aug 2020 17:54:31 +0000

About

In this series, I'll explain the theory and techniques behind color pickers. I'll talk about concepts and link code examples from a real project, which you can download on NuGet

This widget was written for a pixel art editor

Introduction to types of color pickers

There are a lot of different approaches to color picking and frankly, there is no perfect solution, every approach has pros and cons. I'll cover the necessary theoretical knowledge, so you could build your own.

Ready to go? Awesome! Let's start with color theory and a single panel HSL color picker

Anyone know good technical documentation service?

Krzysztof Krysiński — Wed, 03 Jun 2020 09:46:30 +0000

Hey, I have quite complex piece of software on Github, and I want to document it, Normally I would use GitHub pages, but as I said, It's quite big so I don't know if there is something better out there.
Thanks

Best Web Browsers in 2021

Krzysztof Krysiński — Wed, 19 Feb 2020 13:12:18 +0000

tl;dr

Best overall: Brave

Most Customizable: Vivaldi
Best Privacy: Brave
Best Synchronization: Google Chrome

Introduction

I've been testing a lot of different web browsers for past few years and this article is here to help you with choice.

Every web browser mentioned here is good, fast and feature-rich, there is no best one, these choices are my subjective and they are just to help you with picking your best.

What I took into consideration

There are 4 main factors I considered most important: Privacy, Synchronization and Customization options.

I'll talk about them at first. But I'll only talk about browsers that stands out in each section, I am not going to describe every browser in every section.

Privacy

Brave

Absolute leader here is Brave. Main idea of this browser was complete privacy.

It has built-in Ad-blocker, Cross-site trackers blocker, HTTPS upgrades and many more as function called Shields. Another great thing is serverless synchronization between devices, no accounts, no logins. Just Sync Chains.

Besides Incognito mode, Brave has Tor support built-in!

Firefox

Firefox blocks trackers as well and has interesting feature called Firefox Monitor, which alerts you about data breaches you've been included in. Besides that it has a few privacy friendly features like Send and Lockwise.

Opera

Opera just like Firefox and Brave, blocks trackers and has built-in Ad-blocker. Except that it includes free VPN which replaces your IP Address and protects you in public networks.

Synchronization

Google Chrome

Unbeatable winner here is Google Chrome. We are surrounded by Google, and Google Chrome easily syncs all of our data across devices. This is unfortunately at the expense of privacy.

Google Chrome syncs all of the data, from browsing history to browser extensions.

Vivaldi

Vivaldi does a great job in data sync, it allows to synchronize bookmarks, passwords, open tabs and more. It's great if you are using Vivaldi on Mobile.

You can create sync profiles and use it as guest.

Firefox

Same as Vivaldi, great sync options when using multiple devices.

Microsoft Edge (Chromium)

For now sync is limited to Favourites, Settings, Adresses and Passwords, but Microsoft promises to add support for History, Open tabs, Extensions and Collections.

Edge uses Microsoft account for synchronizing, so it's a good choice if you are Microsoft fan.

Customization

Vivaldi

If you are a fan of customizing things, you'll gonna love Vivaldi.

This browser can be customized in almost any way. You can change position of address bar, tabs, side panel, bookmark bar and more. It comes with great themes engine with a lot pre-built themes, it allows you to schedule theme changing and even integrate them with Razer Chroma and Philips Hue.

Except visual customization, Vivaldi allows to personalize a lot of behavior like keyboard shortcuts and mouse gestures. You can change default search engines to almost whatever you want, you are not only limited to Google, Duck Duck Go and Bing.

Customizing Vivaldi could be topic for a separate article.

Other browsers

Firefox

Firefox does a great job in terms of customization too, mostly due to Firefox Addons.

Microsoft Edge (Chromium) and Opera

Both allows to customize basic things like theme and fonts, but besides that they allow to customize news feed on on startup page.

Other Chromium based browsers

Thanks to Chrome Extensions most of Chromium based web browsers are quite well customizable.

Other great features

Now I'll talk about unique or worth to mention features on different browsers.

Brave

Except Privacy, Brave has Crypto Wallets and unique cryptocurrency called BAT. From time to time personalized advertisement shows (if you turn them on!) as system popup, when you click on it, you'll earn cryptocurrency called BAT which you can withdraw or send as tip to other creators. I think this is a awesome feature.

Vivaldi

Vivaldi's side bar is a very comfortable tool, you can add any website you want to quickly open it on the side without leaving page you are currently on. It is great for messaging apps like Messenger.

Screenshots are another very handy tool that allows you to screenshot selected area or whole page (without scrolling!), you can save them as PNG, JPEG or copy to clipboard.

Page Actions is a great feature for us, programmers and not only. It allows to manipulate pages we are on. Here is a full list of thing you can do with it

Opera

Screenshot utility, simillar to Vivaldi's

Side bar just like Vivali's, but with less customization options, it comes with Messenger, Whatsapp, Telegram and VK support.

Opera most unique thing is free unlimited VPN.

Firefox

Firefox comes with Firefox Monitor, Send and Lockwise. Monitor alerts you about data breaches, Send allows to send securely files and Lockwise is password manager.

Microsoft Edge (Chromium)

Microsoft Edge at the moment has personalizable news feed and save site as app.

Why I chose Brave as best web browser?

As a programmer, privacy is very important thing to me. Brave is fully featured and doesn't lack anything that web browser should have. Except that I am crypto fan and earning BATs feels good!

Conclusion

Choosing right web browser is very important, this is a tool you use most often. Therefore sitting for a while and testing what works best for you is recommended. Especially if you are a programmer.

I hope you liked this article. I'd really appreciate a like or comment!

P.S Links to Brave are referrals, but it's just a way of support, it doesn't affect point of view in the article :)