A small twig extension to convert string into css color values

0.0.1 2017-06-30 16:07 UTC

This package is auto-updated.

Last update: 2021-03-29 00:40:05 UTC



The Twig CssColorFromString bundle extends Twig with a simple filter converting strings to a css color.

Quick Example

<div class="badge" style="color: #222; background-color: {{ tag|hex }};">{{ tag }}</div>

The hex filter converts the tag Standard to the css color #747F3F. The output will be

<div class="badge" style="color: #222; background-color: #747F3F;">Standard</div>

Table of Contents

Getting started


Thanks to the stackoverflow developer Reinderien who's post is the fundamental of this plugin.

Install via Composer

composer require fincallorca/twig-css-color-from-string "dev-master"

Add Bundle to Symfony Application

Add the CssColorFromStringBundle to app/AppKernel.php

use Symfony\Component\HttpKernel\Kernel;
use Symfony\Component\Config\Loader\LoaderInterface;
class AppKernel extends Kernel
    public function registerBundles()
        return [
            // [...]
            new Fincallorca\TwigExtension\CssColorFromStringBundle\CssColorFromStringBundle(),

Extended Usage

Filter hex

The hex filter converts a string to a css color.

The same string will be converted every time in the same css color (similar like a hash value).

The optional parameter describe the saturation and lightness and can have values between 0 and 1. The example below uses a saturation of 0.5 and a lightness of 0.9. If no parameters are submitted 0.5 is used for each parameter.

<div class="badge" style="color: #222; background-color: {{ tag|hex(0.5, 0.9) }};">{{ tag }}</div>