{"id":36982413,"url":"https://github.com/presseddigital/colorit","last_synced_at":"2026-01-13T22:52:20.949Z","repository":{"id":47562787,"uuid":"135022685","full_name":"presseddigital/colorit","owner":"presseddigital","description":"A slick color picker fieldtype plugin for the Craft CMS control panel","archived":false,"fork":false,"pushed_at":"2024-06-04T22:13:50.000Z","size":2211,"stargazers_count":21,"open_issues_count":22,"forks_count":8,"subscribers_count":3,"default_branch":"master","last_synced_at":"2026-01-13T21:19:23.059Z","etag":null,"topics":["craftcms","fieldtype","plugin"],"latest_commit_sha":null,"homepage":"","language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/presseddigital.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-05-27T06:50:42.000Z","updated_at":"2024-06-04T21:49:23.000Z","dependencies_parsed_at":"2024-06-03T10:44:51.764Z","dependency_job_id":"1f689008-0daf-43f3-acfc-45118947be12","html_url":"https://github.com/presseddigital/colorit","commit_stats":{"total_commits":59,"total_committers":5,"mean_commits":11.8,"dds":"0.44067796610169496","last_synced_commit":"500ee7a8c6bf4467411325598dd86b6211f48f25"},"previous_names":["fruitstudios/craft-colorit"],"tags_count":19,"template":false,"template_full_name":null,"purl":"pkg:github/presseddigital/colorit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/presseddigital%2Fcolorit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/presseddigital%2Fcolorit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/presseddigital%2Fcolorit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/presseddigital%2Fcolorit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/presseddigital","download_url":"https://codeload.github.com/presseddigital/colorit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/presseddigital%2Fcolorit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28402192,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-13T14:36:09.778Z","status":"ssl_error","status_checked_at":"2026-01-13T14:35:19.697Z","response_time":56,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["craftcms","fieldtype","plugin"],"created_at":"2026-01-13T22:52:20.849Z","updated_at":"2026-01-13T22:52:20.941Z","avatar_url":"https://github.com/presseddigital.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"left\"\u003e\u003ca href=\"https://github.com/presseddigital/colorit\" target=\"_blank\"\u003e\u003cimg width=\"100\" height=\"100\" src=\"resources/img/colorit.svg\" alt=\"Colorit\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n# Colorit plugin for Craft CMS 3\n\nA slick color picker fieldtype plugin for the Craft CMS 3 control panel. [That's a mouthful](https://www.youtube.com/watch?v=uFj5_2gk0rA).\n\nThis fieldtype plugin gives your content editors a simple tool for selecting from a color palette. Colorit also lets you create custom presets that can be selected when creating colorit fields.\n\n## Requirements\n\nThis plugin requires Craft CMS 3.0.0, or later.\n\n## Installation\n\n### Plugin Store\n\nLog into your control panel, hit up the 'Plugin Store', search for this plugin and install.\n\n### Composer\n\nOpen terminal, go to your Craft project folder and use composer to load this plugin. Once loaded you can install via the Craft Control Panel, go to Settings → Plugins, locate the plugin and hit “Install”.\n\n```bash\ncd /path/to/project\ncomposer require presseddigital/colorit\n```\n\n## In Use\n\nSelect a color from the palette.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-field.png\" alt=\"Field Setting\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nGet a live preview when setting opacity.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-field-opacity.png\" alt=\"Opacity Setting\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nDefine a custom color.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-field-custom.png\" alt=\"Custom Setting\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nOption field descriptions.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-choose-desc.png\" alt=\"Field Descriptions\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\n## Templating\n\nEach Colorit fieldtype returns a Color model.\n\n```php\n{{ entry.myColoritFieldName }}                - (string)  // Color in format as per field settings)\n{{ entry.myColoritFieldName.color }}          - (string)  // Returns the color\n{{ entry.myColoritFieldName.color(format) }}  - (string)  // Optional format (hex, rgb, rgba)\n{{ entry.myColoritFieldName.opacity }}        - (integer) // The opacity value\n{{ entry.myColoritFieldName.handle }}         - (string)  // The color handle\n{{ entry.myColoritFieldName.isCustomColor }}  - (bool)    // Is this a custom colour\n{{ entry.myColoritFieldName.isTransparent }}  - (bool)    // Is this transparent\n{{ entry.myColoritFieldName.hasColor }}       - (bool)    // Does the field have a color set\n{{ entry.myColoritFieldName.palette }}        - (array)   // All available colours in the palette\n{{ entry.myColoritFieldName.hex }}            - (string)  // Get the hex value\n{{ entry.myColoritFieldName.hashhex }}        - (string)  // Get the hex value including #\n{{ entry.myColoritFieldName.rgb }}            - (string)  // Get the rgb value\n{{ entry.myColoritFieldName.rgba }}           - (string)  // Get the rgba value\n\n{{ entry.myColoritFieldName.r }}              - (string) // Get the red value\n{{ entry.myColoritFieldName.g }}              - (string) // Get the green value\n{{ entry.myColoritFieldName.b }}              - (string) // Get the blue value\n{{ entry.myColoritFieldName.a }}              - (string) // Get the alpha value\n\n{{ entry.myColoritFieldName.red }}            - (string) // Get the red value\n{{ entry.myColoritFieldName.green }}          - (string) // Get the green value\n{{ entry.myColoritFieldName.blue }}           - (string) // Get the blue value\n{{ entry.myColoritFieldName.alpha }}          - (string) // Get the alpha value\n```\n\n## Utilities\n\nColorit makes a few utilities avaiable in your templates.\n\n```php\n{{ craft.colorit.colours.baseColours }}                - (array)\n{{ craft.colorit.colours.baseColoursAsOptions }}       - (array)\n{{ craft.colorit.colours.hexIsWhite(hex) }}            - (bool)\n{{ craft.colorit.colours.hexIsBlack(hex) }}            - (bool)\n{{ craft.colorit.colours.hexIsTransparent(hex) }}      - (bool)\n{{ craft.colorit.colours.hexToRgb(hex) }}              - (string)\n{{ craft.colorit.colours.hexToRgba(hex, opacity) }}    - (string)\n```\n## Twig Extensions\n\n```php\n{{ ('#555')|hexIsWhite }}                  - (bool)\n{{ ('#555')|hexIsBlack }}                  - (bool)\n{{ ('#555')|hexIsTransparent }}            - (bool)\n{{ ('#555')|hexToRgb }}                    - (string)\n{{ ('#555')|hexToRgba(opacity = 100) }}    - (string)\n```\n## Presets\n\nColorit lets you create custom presets that can be selected when creating colorit fields. For example, you might want to create a \"Brand\" preset and another for \"Secondary\" colors. If you make changes to the preset, it will update any fields where it is in use.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"800px\" src=\"resources/img/colorit-preset-settings.png\" alt=\"Preset Setting\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nWhen creating a new Colorit field you'll have the option to choose one of your presets or create custom field settings for that field. Settings include defining your color palette, appending transparent, black and white. Allowsing custom colours to be created, opacity and label settings.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-choose-preset.png\" alt=\"Preset Choice\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n## Tailwind CSS\n\nYou can easily use Colorit with Tailwind CSS by outputting the Colorit field handle to the class attribute.\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-choose-tailwind.png\" alt=\"Tailwind\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"800px\" src=\"resources/img/colorit-choose-tailwind-palette.png\" alt=\"Tailwind Palette\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003cp align=\"left\"\u003e\u003cimg width=\"590px\" src=\"resources/img/colorit-choose-twig.png\" alt=\"Tailwind Twig\"\u003e\u003c/a\u003e\u003c/p\u003e\n\nBrought to you by [Pressed Digital](https://presseddigital.co.uk).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpresseddigital%2Fcolorit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpresseddigital%2Fcolorit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpresseddigital%2Fcolorit/lists"}