当前位置:首页 > 下载列表 > Color Info

Color Info 0.7.2

新的介绍内容:VSCodeColorInfo扩展:提升CSS颜色信息查看体验ColorInfo是VisualStudioCode的一款强大扩展,为您的CSS颜色提供丰富的信息。当您悬停在CSS颜色上时,ColorInfo会展示多种颜色值,包括:rgb–RGB颜色值,默认启用hsl–HSL颜色值,默认启用css-color-name–颜色名称(如红色、蓝色等)hsv–HS
分类:   下载/工具 · 工具软件 来源:  点击进入 版本:  0.7.2
日期:  2025-07-05 人气:   大小:  
标签:   css __web_extension less color sass hsl rgb cmyk
点击下载 相关下载
功能介绍

新的介绍内容:

fields

VSCode Color Info扩展:提升CSS颜色信息查看体验

Color Info是Visual Studio Code的一款强大扩展,为您的CSS颜色提供丰富的信息。当您悬停在CSS颜色上时,Color Info会展示多种颜色值,包括:

  • rgb – RGB颜色值,默认启用
  • hsl – HSL颜色值,默认启用
  • css-color-name – 颜色名称(如红色、蓝色等)
  • hsv – HSV颜色值
  • lab – LAB颜色值
  • lch – LCHab颜色值
  • cmyk – CMYK颜色值,默认启用
  • hex – 十六进制值,默认启用
  • alpha – 透明度值,默认启用
  • preview – 颜色预览,显示带透明度的颜色在左下角,不带透明度的颜色在右上角,默认启用
  • preview-xl – 更大的颜色预览
  • preview-square – 方形颜色预览
  • preview-square-xl – 更大的方形颜色预览

您可以根据需求自定义显示哪些字段以及它们的显示顺序,具体设置如下:

配置选项:

colorInfo.fields

通过有序数组定义要显示的颜色字段。

fields

colorInfo.excludedFields

定义不显示的字段数组,该设置会覆盖colorInfo.fields。如果您只需要排除一两个默认字段,建议使用colorInfo.excludedFields。

excluded fields

colorInfo.languages

定义启用颜色信息的文件和语言类型,以及支持的颜色类型。默认设置为在CSS、Sass、SCSS和Less文档中启用所有CSS颜色值:

"colorInfo.languages": [
    {
        "selector": "css",
        "colors": "css"
    }, {
        "selector": "sass",
        "colors": "css"
    }, {
        "selector": "scss",
        "colors": "css"
    }, {
        "selector": "less",
        "colors": "css"
    }
]

每个元素包括:

  • "selector" - VSCode文档选择器。
  • "colors" - 定义要显示信息的颜色类型,可以是字符串或字符串数组。有效的颜色类型包括:
    • css - 所有CSS颜色值类型
    • hex - CSS十六进制(#ff00ff或#f0f)
    • hex alpha - CSS十六进制加透明度(#ff00ff77或#f0f7)
    • rgb - CSS rgb或rgba(rgb(1, 2, 3)或rgba(1, 2, 3, 0.5))
    • hsl - CSS hsl或hsla(hsl(1, 2, 3)或hsla(1, 2, 3, 0.5))
    • css-colors-names - CSS颜色名称(如红色、蓝色)

由于VSCode当前不支持嵌套语言,要在HTML文件中启用Color Info,您需要添加:

{
    "selector": "html",
    "colors": "css"
}

请确保将此设置添加到默认的colorInfo.languages设置末尾,以免禁用标准语言的Color Info功能。

版本声明
本文转载于:https://marketplace.visualstudio.com/items?itemName=bierner.color-info 如有侵犯,请联系study_golang@163.com删除
查看更多
课程推荐
  • Golang云原生架构师课程
    Golang云原生架构师课程
    Go是一门并发支持、垃圾回收的编译型系统编程语言;本课程转载自哔哩哔哩:https://www.bilibili.com/video/BV1Mh411M7A
    204次学习
  • MySQL数据管理之备份恢复案例解析视频教程
    MySQL数据管理之备份恢复案例解析视频教程
    《MySQL数据管理之备份恢复案例解析视频教程》MySQL是一个开放源码的小型关联式数据库管理系统,目前MySQL被广泛地应用在Internet上的中小型网站中。由于其体积小、速度快、总体拥有成本低,尤其是开放源码这一特点,许多中小型网站为了降低网站总体拥有成本而选择了MySQL作为网站数据库。
    160次学习
  • MySQL索引优化解决方案
    MySQL索引优化解决方案
    本套课程是根据MySQL索引的设计理念与数据结构、索引使用场景、索引分类、索引运用场景、索引性能分析、查询优化、MySQL索引的慢查询等组成,主要讲述了MySQL索引优化的解决方案,非常适合有MySQL使用基础或者有一定工作经验的同学。课程讲解了解决大数量查询慢的问题、如何编写一个高效的SQL、查询语句应该如何优化、索引的实现原理是什么、索引又应该如何优化...等诸多SQL索引优化的难点和面试点。
    182次学习
  • 极客学院Docker视频教程
    极客学院Docker视频教程
    Docker是PaaS提供商dotCloud开源的一个基于LXC的高级容器引擎,源代码托管在Github上,基于go语言并遵从Apache2.0协议开源。Docker自2013年以来非常火热,无论是从github上的代码活跃度,还是各大厂商的支持,都使Docker成为了时下最受关注的技术,甚至微软都声称在下一代WindowsServer中集成对Docker的支持。所以我们收集了《极客学院Docke
    243次学习
  • Golang进阶实战编程
    Golang进阶实战编程
    本课程是在《Go语言基础视频》基础之上录制的,是Go语言基础的后半部分。包括包的管理,IO操作,Go语言最大的亮点:高并发,goroutine,channel,反射等。本视频主要为了帮助Go语言的初学者,从零到一的快速入门。学完本套课程,可以学会如果通过包管理Go项目,并发模型,以及并发实现,channel通道如何传递数据,反射等等。
    127次学习
  • JavaScript极速入门
    JavaScript极速入门
    本套课程将帮助大家迅速掌握JavaScript这门高端的、动态的、弱类型编程语言。知识点简单明了,让你学习0压力,适合新手观看学习......
    431次学习
微信登录更方便
  • 密码登录
  • 注册账号
登录即同意 用户协议隐私政策
返回登录
  • 重置密码