Highlight colors within Neovim
![Background highlights for hex, rgb, hsl, named colors, and CSS variables](https://private-user-images.githubusercontent.com/1474821/313786646-d99a800c-0ea9-44f9-bc1c-986236adf44a.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg0NDQ0MjQsIm5iZiI6MTcxODQ0NDEyNCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc4NjY0Ni1kOTlhODAwYy0wZWE5LTQ0ZjktYmMxYy05ODYyMzZhZGY0NGEucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYxNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MTVUMDkzNTI0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9NGZmYmNkMTAyOWYzZjk2OTIwNjJjNDc2NzhmN2IxNDY4ZjUyOGJmZWMyNjJiNWI3MDI5NmZmNTRlOTQyZWFjMiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.VA6PznaSdO22jPQVs8828MvRsh-sM4hzaZ8SJqRiz-E)
- Realtime color highlighting
- Supports hex, rgb, hsl, CSS variables, and Tailwind CSS
- Multiple rendering modes: background, foreground, and virtual text
Install via your preferred package manager:
'brenoprata10/nvim-highlight-colors'
Initialize the plugin:
-- Ensure termguicolors is enabled if not already
vim.opt.termguicolors = true
require('nvim-highlight-colors').setup({})
require("nvim-highlight-colors").setup {
---Render style
---@usage 'background'|'foreground'|'virtual'
render = 'background',
---Set virtual symbol (requires render to be set to 'virtual')
virtual_symbol = '■',
---Highlight named colors, e.g. 'green'
enable_named_colors = true,
---Highlight tailwind colors, e.g. 'bg-blue-500'
enable_tailwind = false,
---Set custom colors
---Label must be properly escaped with '%' to adhere to `string.gmatch`
--- :help string.gmatch
custom_colors = {
{ label = '%-%-theme%-primary%-color', color = '#0f1219' },
{ label = '%-%-theme%-secondary%-color', color = '#5a5d64' },
}
}
Examples shown use
enable_tailwind = true
Background
![Background highlights for named colors, CSS variables, and Tailwind CSS colors](https://private-user-images.githubusercontent.com/1474821/313771591-bf8c0d2d-552c-485a-aeba-b3d281c8c333.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg0NDQ0MjQsIm5iZiI6MTcxODQ0NDEyNCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU5MS1iZjhjMGQyZC01NTJjLTQ4NWEtYWViYS1iM2QyODFjOGMzMzMucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYxNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MTVUMDkzNTI0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YWMxODIwNGZiOTViMjg0NDk5NmVlNWQ2NTM3Mzk2MTRiYjc1MTExY2NhNjFkZjcxMThhNGUyMWNjODA2NDJhMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.1bTvOaJoki3jXkCRgofifEFds4ohmLA_C5sBlA8o4NE)
Foreground
![Foreground highlights for named colors, CSS variables, and Tailwind CSS colors](https://private-user-images.githubusercontent.com/1474821/313771551-4e2e9c7d-552b-4558-ab79-4fe37738f869.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg0NDQ0MjQsIm5iZiI6MTcxODQ0NDEyNCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTU1MS00ZTJlOWM3ZC01NTJiLTQ1NTgtYWI3OS00ZmUzNzczOGY4NjkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYxNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MTVUMDkzNTI0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YzQyMDk2Nzg0MTEzYzUwMWQzMTU2OGY2ZDJlOGIwZDI1YTZjMDRmYTA0OGE2YTZiMmNjYWNhMDZlMzQ3NjVkZiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.uaJJSyjBh9nJ4je6rCxXR6dMdVeB5zRc77Z-lrMc-M4)
Virtual text
![Virtual text highlights for named colors, CSS variables, and Tailwind CSS colors](https://private-user-images.githubusercontent.com/1474821/313771534-536b16e4-04ad-4ede-95f5-c1855386c294.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTg0NDQ0MjQsIm5iZiI6MTcxODQ0NDEyNCwicGF0aCI6Ii8xNDc0ODIxLzMxMzc3MTUzNC01MzZiMTZlNC0wNGFkLTRlZGUtOTVmNS1jMTg1NTM4NmMyOTQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDYxNSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA2MTVUMDkzNTI0WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OGI3MTMzNWE3ZDExZjc5ZDc4ODk1ZmJlYTcxYjkxNjY3MTI5NGMxYjBiYzAwOWM5M2ZhYmI5NDU4Mjc4MGQ3OCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.CJFZiv_OwqardHVHh5uyHyKQ96GGf7hg8I76h99HMhA)
Command | Description |
---|---|
:HighlightColors On |
Turn highlights on |
:HighlightColors Off |
Turn highlights off |
:HighlightColors Toggle |
Toggle highlights |
Commands are also available in lua:
require("nvim-highlight-colors").turnOn()
require("nvim-highlight-colors").turnOff()
require("nvim-highlight-colors").toggle()