{"id":14066786,"url":"https://github.com/matt-dray/dehex","last_synced_at":"2025-09-17T10:55:44.318Z","repository":{"id":47719393,"uuid":"391736896","full_name":"matt-dray/dehex","owner":"matt-dray","description":":art::eyes: R package: learn to assess a colour hex code by eye","archived":false,"fork":false,"pushed_at":"2022-02-22T21:31:50.000Z","size":573,"stargazers_count":30,"open_issues_count":3,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-12T16:51:14.901Z","etag":null,"topics":["color","colour","hex"],"latest_commit_sha":null,"homepage":"https://matt-dray.github.io/dehex/","language":"R","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/matt-dray.png","metadata":{"files":{"readme":"README.Rmd","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-08-01T20:58:02.000Z","updated_at":"2024-12-07T20:54:55.000Z","dependencies_parsed_at":"2022-09-23T17:21:56.136Z","dependency_job_id":null,"html_url":"https://github.com/matt-dray/dehex","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/matt-dray/dehex","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dray%2Fdehex","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dray%2Fdehex/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dray%2Fdehex/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dray%2Fdehex/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matt-dray","download_url":"https://codeload.github.com/matt-dray/dehex/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matt-dray%2Fdehex/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275583377,"owners_count":25490651,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-17T02:00:09.119Z","response_time":84,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["color","colour","hex"],"created_at":"2024-08-13T07:05:15.699Z","updated_at":"2025-09-17T10:55:44.270Z","avatar_url":"https://github.com/matt-dray.png","language":"R","funding_links":[],"categories":["R"],"sub_categories":[],"readme":"---\noutput: github_document\n---\n\n\u003c!-- README.md is generated from README.Rmd. Please edit that file --\u003e\n\n```{r, include = FALSE}\nknitr::opts_chunk$set(\n  collapse = TRUE,\n  comment = \"#\",\n  fig.path = \"man/figures/README-\",\n  out.width = \"100%\"\n)\n```\n\n# {dehex} \u003cimg src='man/figures/logo.png' align=\"right\" height=\"139\" /\u003e\n\n\u003c!-- badges: start --\u003e\n[![Project Status: Active – The project has reached a stable, usable state and is being actively developed.](https://www.repostatus.org/badges/latest/active.svg)](https://www.repostatus.org/#active)\n[![R-CMD-check](https://github.com/matt-dray/dehex/workflows/R-CMD-check/badge.svg)](https://github.com/matt-dray/dehex/actions)\n[![Codecov test coverage](https://codecov.io/gh/matt-dray/dehex/branch/main/graph/badge.svg)](https://codecov.io/gh/matt-dray/dehex?branch=main)\n[![CRAN status](https://www.r-pkg.org/badges/version/oystr)](https://CRAN.R-project.org/package=oystr)\n![Shiny app](https://img.shields.io/badge/Shiny-in_package-blue?style=flat\u0026labelColor=white\u0026logo=RStudio\u0026logoColor=blue)\n[![Blog post](https://img.shields.io/badge/rostrum.blog-post-008900?labelColor=000000\u0026logo=data%3Aimage%2Fgif%3Bbase64%2CR0lGODlhEAAQAPEAAAAAABWCBAAAAAAAACH5BAlkAAIAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAAC55QkISIiEoQQQgghRBBCiCAIgiAIgiAIQiAIgSAIgiAIQiAIgRAEQiAQBAQCgUAQEAQEgYAgIAgIBAKBQBAQCAKBQEAgCAgEAoFAIAgEBAKBIBAQCAQCgUAgEAgCgUBAICAgICAgIBAgEBAgEBAgEBAgECAgICAgECAQIBAQIBAgECAgICAgICAgECAQECAQICAgICAgICAgEBAgEBAgEBAgICAgICAgECAQIBAQIBAgECAgICAgIBAgECAQECAQIBAgICAgIBAgIBAgEBAgECAgECAgICAgICAgECAgECAgQIAAAQIKAAAh%2BQQJZAACACwAAAAAEAAQAAAC55QkIiESIoQQQgghhAhCBCEIgiAIgiAIQiAIgSAIgiAIQiAIgRAEQiAQBAQCgUAQEAQEgYAgIAgIBAKBQBAQCAKBQEAgCAgEAoFAIAgEBAKBIBAQCAQCgUAgEAgCgUBAICAgICAgIBAgEBAgEBAgEBAgECAgICAgECAQIBAQIBAgECAgICAgICAgECAQECAQICAgICAgICAgEBAgEBAgEBAgICAgICAgECAQIBAQIBAgECAgICAgIBAgECAQECAQIBAgICAgIBAgIBAgEBAgECAgECAgICAgICAgECAgECAgQIAAAQIKAAA7)](https://www.rostrum.blog/2021/08/10/dehex/)\n\u003c!-- badges: end --\u003e\n\n'Dehex', from [Wiktionary](https://en.wiktionary.org/wiki/dehex):\n\n\u003e To remove a hex (a spell, especially an evil spell).\n\nAn R package containing simple functions and a Shiny app to help me train myself to 'read' a colour from its hex code. I'm colourblind (a deuteranope) so this might be a useful skill. [Read the accompanying blog post](https://www.rostrum.blog/2021/08/10/dehex/) for more info.\n\n## The DeSandro method\n\n[David DeSandro gave a talk at dotCSS 2018](https://metafizzy.co/blog/read-color-hex-codes/) about 'reading' colour hex codes by eye to get a colour like 'dark saturated orange' ([thanks Maëlle](https://twitter.com/ma_salmon/status/1420726230194794496?s=20)).\n\nThere are five steps:\n\n1. Simplify from a six- to a three-digit hex code\n1. Create an RGB bar chart from the short hex code\n1. Assess hue from the chart 'shape'\n1. Assess saturation from the RGB range\n1. Assess lightness from the RGB total\n\nThis package contains functions that guide you through that process and can 'solve' the hex code for you. I've also put them in a Shiny app that's bundled with the package.\n\n## Install\n\nYou can install the development version from GitHub.\n \n```{r install, eval=FALSE}\nremotes::install_github(\"matt-dray/dehex\")\n```\n\n## App\n\nThe package contains a Shiny app that generates a random colour hex code and walks you through the steps of DeSandro's method using functions from the {dehex} package. You can run it with `dh_app()`. It requires the {shiny} and {bslib} packages, which can both be installed with `install.packages()`. Here's a preview:\n\n\u003cdiv class=\"figure\"\u003e\n\u003cimg src=\"inst/images/app-screenshot-v0.1.2.png\" alt=\"Screenshot of a Shiny app called 'Learn to read a colour hex code. On the left is a panel with a button labelled generate with a colour hex code beneath it. On the right is a panelset open on a panel called 'solve', which is showing an English phrase and example plot for the colour encoded by the hex code, which is 'middle washed orange'.\" width=\"100%\"/\u003e\n\u003c/div\u003e\n\n## Functions\n\n### Three-digit shorthand\n\nFirst, convert a full six-character hex code to its three-character shortcode. This takes the first value from each pair of characters.\n\n```{r ex-shorten}\nlong \u003c- \"#6BCFFA\"\nshort \u003c- dehex::dh_shorten(long)\nshort\n```\n\nYou could also generate a random one with `dh_random()`.\n\n### Bar chart\n\nUse `dh_graph()` to print to the console a bar chart that shows the decimal values of red (R), green (G) and blue (B) for your shortened hex code. \n\n```{r ex-graph}\ndehex::dh_graph(short)\n```\n\nThe RGB columns are printed in colour in RStudio, thanks to [the {crayon} package](https://github.com/r-lib/crayon). (You can turn this off by setting the argument `crayon = FALSE`.)\n\n\u003cdiv class=\"figure\"\u003e\n\u003cimg src=\"man/figures/graph-crayon-dark.png\" alt=\"Output from the dehex package's dh_graph function, which shows a horizontal bar chart in the RStudio console with a dark theme. The columns are labelled R, G, B, S and L and the ends of the RGB columns are labelled H1, H2 and H3. The RGB bars are coloured red, blue and green; S and L are white. Above the plot is the three-digit colour hex code that graph is summarising.\" width=\"250px\"/\u003e\n\u003c/div\u003e\n\nNote that the chart is adorned by extra information that tells you something about the hue (H, i.e. the relative 'rank' of each RGB channel), saturation (S, i.e. the RGB range) and lightness (L, i.e. the RGB average). You can remove these guides by setting the `adorn_*` arguments to `FALSE`.\n\nThe idea is to compare this to a set of guides that provide rough categorisations of hue, saturation and lightness to generate an English phrase.\n\n### Guides\n\n#### Hue from shape\n\nTo assess the hue of your hex code, compare its RGB profile from `dh_graph()` to the guide provided by `dh_guide(\"H\")`. The exact amounts don't matter; it's the relative values of RGB that we care about. For this reason, the end of each bar shows you the relative `rank()` of each channel (the smallest value is ranked '1', a tie between the two smallest gives them both a rank of '1.5', etc).\n\nWell, technically my ranking system here has a wider tolerance for ties. So RGB values of 15, 6, and 5 will result in a tie between green and blue because their difference is below a certain threshold (2, but subject to testing).\n\n\u003cdetails\u003e\u003csummary\u003eClick to see the hue guides\u003c/summary\u003e\n```{r ex-hue}\ndehex::dh_guide(\"H\")\n```\n\u003c/details\u003e\n\n#### Saturation from range\n\nTo assess the saturation of your hex code, compare its RGB profile from `dh_graph()` to the guide provided by `dh_guide(\"S\")`. A larger RGB range means a more saturated colour.\n\n\u003cdetails\u003e\u003csummary\u003eClick to see the saturation guides\u003c/summary\u003e\n```{r ex-sat}\ndehex::dh_guide(\"S\")\n```\n\u003c/details\u003e\n\n#### Lightness from total\n\nTo assess the lightness of your hex code, compare its RGB profile from `dh_graph()` to the guide provided by `dh_guide(\"L\")`. A higher total RGB means it's lighter in colour, but I've chosen to show the mean value as a guide.\n\n\u003cdetails\u003e\u003csummary\u003eClick to see the lightness guides\u003c/summary\u003e\n```{r ex-light}\ndehex::dh_guide(\"L\")\n```\n\u003c/details\u003e\n\n### The solution\n\nLuckily, `dh_solve()` returns the 'answer' for your colour as a text string. So, for our input `r short`, the 'answer' is:\n\n```{r ex-solve}\ndehex::dh_solve(short)\n```\n\nOf course, you could just use this function to get a simple way of communicating colour from hex codes without learning how to do it by 'reading' a hex code yourself.\n\nYou can also ask to return the relevant bar charts that best describe the hue, saturation and lightness that led to the result.\n\n```{r ex-solve2}\ndehex::dh_solve(short, graphs = TRUE)\n```\n\nAnd if you're wondering what the colour actually is, you can either set `swatch = TRUE` in `dh_solve()`, or use `dh_swatch()` to generate a plot filled with that colour.\n\n```{r ex-swatch, out.width=\"100px\", out.height=\"100px\", fig.alt=\"A square of colour with its three-digit hex colour code in text in the centre.\"}\ndehex::dh_swatch(short)\n```\n\n## Code of Conduct\n\nPlease note that the {dehex} project is released with a [Contributor Code of Conduct](https://contributor-covenant.org/version/2/0/CODE_OF_CONDUCT.html). By contributing to this project, you agree to abide by its terms.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatt-dray%2Fdehex","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatt-dray%2Fdehex","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatt-dray%2Fdehex/lists"}