Color preview is obstructed by foreground text

[zaakiy]

Request for other features

It's good that there is a preview of the new color, however the foreground text obscures the visibility of that color preview.

I sugggest the preview look something like this (note that the extra colour spaces are not part of this request, please only focus on the preview line at the bottom):

Honestly, the entire purpose of having a color picker is so that we don't need to worry about the actual hex value.

Here is how I achieved this

    -- Custom output_line function to hide hex code text
    local function custom_output_line(before_color, after_color, width)
      local b_hex = before_color:hex()
      local a_hex = after_color:hex()

      -- Create a line with just spaces (no visible text)
      local line = (" "):rep(width)

      -- Range for highlight - split the width in half for before/after colors
      local b_start_col = 0
      local b_end_col = math.floor(width / 2)
      local a_start_col = b_end_col
      local a_end_col = width

      return line, b_start_col, b_end_col, a_start_col, a_end_col
    end

    ccc.setup({
      -- Enable highlighter
      highlighter = {
        auto_enable = true,
        lsp = true,
      },
      -- Use custom output_line to hide hex code text
      output_line = custom_output_line,
    })

If you want my exact config, here it is (lazy):

return {
  "uga-rosa/ccc.nvim",
  config = function()
    local ColorInput = require("ccc.input")
    local convert = require("ccc.utils.convert")

    local RgbHslCmykInput = setmetatable({
      name = "RGB/HSL/CMYK",
      max = { 1, 1, 1, 360, 1, 1, 1, 1, 1, 1 },
      min = { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
      delta = { 1 / 255, 1 / 255, 1 / 255, 1, 0.01, 0.01, 0.005, 0.005, 0.005, 0.005 },
      bar_name = { "R", "G", "B", "H", "S", "L", "C", "M", "Y", "K" },
    }, { __index = ColorInput })

    function RgbHslCmykInput.format(n, i)
      if i <= 3 then
        -- RGB
        n = n * 255
      elseif i == 5 or i == 6 then
        -- S or L of HSL
        n = n * 100
      elseif i >= 7 then
        -- CMYK
        return ("%5.1f%%"):format(math.floor(n * 200) / 2)
      end
      return ("%6d"):format(n)
    end

    function RgbHslCmykInput.from_rgb(RGB)
      local HSL = convert.rgb2hsl(RGB)
      local CMYK = convert.rgb2cmyk(RGB)
      local R, G, B = unpack(RGB)
      local H, S, L = unpack(HSL)
      local C, M, Y, K = unpack(CMYK)
      return { R, G, B, H, S, L, C, M, Y, K }
    end

    function RgbHslCmykInput.to_rgb(value)
      return { value[1], value[2], value[3] }
    end

    function RgbHslCmykInput:_set_rgb(RGB)
      self.value[1] = RGB[1]
      self.value[2] = RGB[2]
      self.value[3] = RGB[3]
    end

    function RgbHslCmykInput:_set_hsl(HSL)
      self.value[4] = HSL[1]
      self.value[5] = HSL[2]
      self.value[6] = HSL[3]
    end

    function RgbHslCmykInput:_set_cmyk(CMYK)
      self.value[7] = CMYK[1]
      self.value[8] = CMYK[2]
      self.value[9] = CMYK[3]
      self.value[10] = CMYK[4]
    end

    function RgbHslCmykInput:callback(index, new_value)
      self.value[index] = new_value
      local v = self.value
      if index <= 3 then
        local RGB = { v[1], v[2], v[3] }
        local HSL = convert.rgb2hsl(RGB)
        local CMYK = convert.rgb2cmyk(RGB)
        self:_set_hsl(HSL)
        self:_set_cmyk(CMYK)
      elseif index <= 6 then
        local HSL = { v[4], v[5], v[6] }
        local RGB = convert.hsl2rgb(HSL)
        local CMYK = convert.rgb2cmyk(RGB)
        self:_set_rgb(RGB)
        self:_set_cmyk(CMYK)
      else
        local CMYK = { v[7], v[8], v[9], v[10] }
        local RGB = convert.cmyk2rgb(CMYK)
        local HSL = convert.rgb2hsl(RGB)
        self:_set_rgb(RGB)
        self:_set_hsl(HSL)
      end
    end

    local ccc = require("ccc")
    local mapping = ccc.mapping

    -- Custom output_line function to hide hex code text
    local function custom_output_line(before_color, after_color, width)
      local b_hex = before_color:hex()
      local a_hex = after_color:hex()

      -- Create a line with just spaces (no visible text)
      local line = (" "):rep(width)

      -- Range for highlight - split the width in half for before/after colors
      local b_start_col = 0
      local b_end_col = math.floor(width / 2)
      local a_start_col = b_end_col
      local a_end_col = width

      return line, b_start_col, b_end_col, a_start_col, a_end_col
    end

    ccc.setup({
      inputs = {
        RgbHslCmykInput,
      },
      -- Enable highlighter
      highlighter = {
        auto_enable = true,
        lsp = true,
      },
      -- Add keyboard mappings for color adjustment
      mappings = {
        ["<Left>"] = mapping.decrease1,
        ["<Right>"] = mapping.increase1,
        ["h"] = mapping.decrease1,
        ["l"] = mapping.increase1,
        ["<S-Left>"] = mapping.decrease10,
        ["<S-Right>"] = mapping.increase10,
      },
      -- Use custom output_line to hide hex code text
      output_line = custom_output_line,
    })

    -- Set up keyboard shortcuts: Ctrl+C to activate color picker
    vim.keymap.set("n", "<C-c>", "<cmd>CccPick<CR>", { noremap = true, silent = true })
    vim.keymap.set("i", "<C-c>", "<cmd>CccPick<CR>", { noremap = true, silent = true })
    -- Enable true color support
    vim.opt.termguicolors = true
  end,
}