😍
Framer API 中文版
  • 写在前面
  • 从这里开始
    • 介绍
      • 快速开始
      • 基础
    • 教程
      • 准备 Setup
      • 引入 Slider 组件
      • Slider组件的元素
      • 拖动 & MotionValue
      • Hooks & 传递数据
      • 完成
      • 回顾
    • 简要案例
      • Frame
      • Stack
      • Animate
      • Gestures
      • Dragging 拖拽
      • Scrolling 滚动
      • Paging 翻页
      • Tranforms 变换
      • Variants 动画状态组
  • LIBRARY 库
    • Frame
      • Layout 布局
      • Visual 视觉
      • Transform 变换
      • Animation 动画
      • Transition 过渡
      • Variants 动画状态组
      • Tap 点击
      • Hover 悬浮
      • Pan
      • Drag
      • Types
    • Animation
      • Overview
      • Animation controls
      • Tween
      • Spring
      • Inertia 惯性
      • Orchestration
      • Types
    • Color
      • Create
      • Modify
      • Convert
      • Compare
      • Models
    • Page
      • Content
      • Padding
      • Events
      • Effects
      • PageEffectInfo
    • Scroll
      • Sizing
      • Content
      • Events
    • Stack
      • Content
      • Padding
    • Utilities
      • Transfrom
      • useTransform
      • useAnimation
      • useCycle
      • useMotionValue
      • useSpring
      • useViewportScroll
  • FRAMER X
    • Assets
      • Functions
    • Data & Overrides
    • CanvasComponents
      • Canvas.tsx
      • Layout
      • Colors
    • PropertyControls
      • Adding Controls
      • Hiding Controls
      • Array
      • Boolean
      • Color
      • ComponentInstance
      • Enum
      • File
      • FusedNumber
      • Image
      • Number
      • SegmentedEnum
      • String
    • Render Target
      • Properties
      • Functions
Powered by GitBook
On this page

Was this helpful?

  1. LIBRARY 库
  2. Color

Convert

Color.toHex(color, allow3Char): string

把颜色对象的颜色值的格式转成16进制的格式.,注意这个方法返回的值不带#号

const blue = Color("#0099FF")

Color.toHex(blue) // "0099FF"
Color.toHex(Color("#FFAAFF"), true) // "FAF"

color: Color

需要进行颜色转换的颜色

allow3Char: boolean

如果可以,会返回一个3位的hex格式的颜色值,默认是false

returns: string

Color.toHexString(color, allow3Char): string

把颜色对象的颜色值的格式转成16进制的格式,注意这个方法返回的值带#号

const blue = Color("#0099FF")

Color.toHexString(blue) // "#0099FF"
Color.toHexString(Color("#FFAAFF"), true) // "#FAF"

color: Color

需要进行颜色转换的颜色

allow3Char: boolean

如果可以,会返回一个3位的hex格式的颜色值,默认是false

returns: string

Color.toHsl(color): ColorHSLA

格式化一个颜色的,返回一个HSL格式的对象

const blue = Color("#0099FF")

Color.toHsl(blue) // {h: 204, s: 1, l: 0.5, a: 1}

color: Color

需要格式化的颜色

returns: ColorHSLA

Color.toHslString(color): string

格式化一个颜色,把它转变成hsl格式的字符串形式

const blue = Color("#0099FF")

Color.toHslString(blue) // "hsl(204, 100%, 50%)"

color: Color

需要格式化的颜色

returns: string

Color.toHsv(color): ColorHSVA

格式化一个颜色,把它转变成HSV格式的颜色对象

const blue = Color("#0099FF")

Color.toHsv(blue) // {h: 204, s: 1, v: 1, a: 1}"

color: Color

要进行转换的颜色

returns: ColorHSVA

Color.toHsvString(color): string

格式化一个颜色实例,把它转换成HSV颜色格式的字符串

color: Color

需要格式转换的颜色

returns: string

Color.toHusl(color): ColorHSLA

把一个颜色实例转换成HUSL格式的对象

const blue = Color("#0099FF")

Color.toHusl(blue) // {h: 250, s: 100, l: 50, a: 1}

color: Color

需要进行格式转换的颜色

returns: ColorHSLA

Color.toName(color): string | false

把一个颜色实例的值转换成横css中的颜色名称,如果当前颜色值没有对应可转换的,那就返回false

const green = Color("#8FBC8F")

Color.toName(green) // "darkseagreen"

color: Color

需要被转换的颜色

returns: string | false

Color.toRgb(color): ColorRGBA

把颜色实例转换成一个RGB的对象

const blue = Color("#0099FF")

Color.toRgb(blue) // {r: 40, g: 175, b: 250, a: 1}

color: Color

需要转换的颜色实例

returns: ColorRGBA

Color.toRgbString(color): string

把颜色实例转换成RGB的格式的字符串形式

const blue = Color("#0099FF")

Color.toRgbString(blue) // "rgb(0, 153, 255)"

color: Color

需要转换的颜色实例

returns: string

Color.toString(color): string

把颜色实例转换成RGB的格式的字符串形式

const blue = Color("#0099FF")

Color.toString(blue) // "rgb(0, 153, 255)"

color: Color

需要转换的颜色实例

returns: string

PreviousModifyNextCompare

Last updated 5 years ago

Was this helpful?