January 30, 2020
Yesterday I published Claritas - my first hex package! The idea for the package came when I worked on some task and needed dynamically generate a heatmap where the more intensive colour, the higher value of given scale in the heatmap. I used CSS for that, but I though that a pure solution in Elixir would make the code much cleaner. Here it is:
Installation
The package can be installed by adding claritas to your list of dependencies in mix.exs:
def deps do
[
{:claritas, "~> 0.1.1"}
]
end
and running mix deps.get in your console to fetch from Hex.
Basic Usage
positive values are lightening the color
iex> Claritas.shift("#f06d06", 30)
{:ok, "#FF8B24"}
negative values are darkening the color
iex> Claritas.shift("#f06d06", -30)
{:ok, "#D24F00"}
Dynamically increase/decrease brightness of your colors.
def index(conn, _params) do
shades =
for i <- 1..20, into: [] do
Claritas.shift("#141C5B", 10 * i)
end
render(conn, "index.html", shades: shades)
end
<ul>
<%= for {_, shade} <- @shades do %>
<li><span style='background-color: <%= shade %>'><%= shade %></span></li>
<% end %>
</ul>
As you see it’s a simple way to manipulate shades of colors: